Header Layout

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Header" > "Layout & Appearance"

This area allows for the creation of a custom header layout. Each of the following areas can be reordered (via drag and drop) or removed (by unchecking).

  • Your logo (or none if you choose)
  • A masthead area (can be a static image, rotating image, or a slideshow)
  • Your primary navigation menu
  • Your secondary navigation menu

As the video placeholder image indicates, the header sits above the content and the optional bio area. Neither the content area nor the bio area can be moved. To move any of the four header elements, click on the “handles” to the left and drag to a new position.  If a header element is unchecked here, you will see it disappear from the layout view and from the site.  A message in the customization area for the unchecked item indicates it’s been deactivated from the header.deactivated header item

The primary nav menu has two options for display. It can display normally in its assigned header location and scroll with the page. Or, it can be set to stick to the top of the browser window so it stays fixed in-place when scrolling.  When you check the option to stick it to the top  you then will choose whether you want the menu to a) remain constrained to the site width as you scroll or to; b) expand visually to the full width of the browser window when reaching the top.

Because touch devices don’t always deal well with these kind of fixed menus we provide the option to disable it only on touch devices.  When disabled, the menu will gracefully fall back to scrolling with the page in your chosen header order.

The secondary nav menu does not have these options.wp39_primary_header_options

Logo Placement Options

The logo has a number of placement options. It can be on it’s own line, share space with the masthead area, overlay the masthead or be used in a menu or widget area. There are alignment options only when on it’s own line or sharing space with the masthead.

Logo on own line

In this scenario, the logo can be any height you want, and up to the full width of your site.wp39_logo_header_ownline

Logo splitting space with masthead

In this scenario, the width and height of your masthead images will be determined by the width and height of your logo. The wider the logo is, the less space there is for the masthead images.
wp39_header_logo_mast

Logo overlaying masthead

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Header" > "Layout & Appearance"

To enable the option to have the logo overlay the masthead first choose to display the logo “on same line as masthead” and “overlaying masthead”wp39_logo_over_mast_options

With those options checked in the header layout area, you’ll immediately be presented with the option area below.  wp39_logo_overlays_masthead

Here you arrange your logo so that it overlays your masthead exactly how you want.  You have both vertical and horizontal alignment options.  Choosing both centered options will exactly center your logo over your masthead.  If choosing the left, right, top or bottom edge options, you can enter in exactly the number of pixels you want between the edge of your masthead and the logo.

Keep in mind that your masthead image will not be downsized to fit in this option area. You be given a scroll bar to preview the entire image

Logo in menu or widget

wp39_logo_options_header
If you choose to have your logo set to display within the Menu area, you will need to go to “ProPhoto” > “Customize” > “Menus” and create a new menu item to display your logo.  When creating the menu item, set to Special Link Types and choose “Logo image” from the dropdown.  You can then use the menu alignment options to place your logo image wherever you’d like within your menu area.

And if you’d like to display your logo in a widget area (e.g. Sidebar), you will want to to go “Appearance” > “Widgets”  and use a “ProPhoto Logo Widget” to display it accordingly.wp39_logo_widget

Masthead tips

If your logo or your masthead are on their own line then the max width for those images will be your overall site width, which is set in “ProPhoto” > “Customize” > “Background”.  If you are using a masthead frame, and/or your logo is on the same line as the masthead, then your required masthead image width will displayed in “ProPhoto” > “Customize” > “Header Area” > “Masthead Image & Slideshow”.  The height of a logo sharing space with a masthead will set the height of the masthead. Obviously, if the available space for your masthead changes, then you will need to resize and reupload your images at the exact dimensions that ProPhoto recommends.

If you choose a layout with a logo centered on top of the masthead, you might think that you need to upload sets of two smaller masthead images – one for the left and one for the right of the logo.  Actually, you still upload a single image at the recommended width and your logo sits on top and in the middle. So you kind of need to leave a ‘hole’ in the middle of a single masthead image.

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto 4" > "Customize" > "Header" > "Layout & Appearance"

This area allows you to choose from 24 different header arrangements involving:

  • Your logo (or none if you choose)
  • A masthead area (can be a static image, rotating image, or a slideshow)
  • Your blog’s main navigation menu

If your logo or your masthead are on their own line then the max width for those images will be your overall site width, which is set in “ProPhoto” > “Customize” > “Background”.  If you are using a masthead frame then your required masthead image width will displayed in “ProPhoto” > “Customize” > “Header Area” > “Masthead Image & Slideshow”.

You cannot create your own custom layout.  These are the only options. The thumbnail images should make this pretty self-explanatory, but there are a couple gotchas:

Sometimes, choosing a different layout can mean that the necessary size for your masthead image(s) changes. This is mostly true when switching to/from one of the first three layouts to something else. After you’ve selected the layout, you may have to resize and reupload your masthead images. If you see funny extra space in your masthead, or your images are being cropped, this is probably the problem. To find out what size you need to upload, just visit “ProPhoto” > “Customize” > “Header Area” > “Masthead Image & Slideshow” area, which will advise you of what size images you need to have, and if your current images fit.

If you choose layout#2, which has a masthead on either side of the logo, you might think that you need to upload two sets of smaller masthead images. Well, you thought wrong :) Basically you still upload full width images and your logo sits on top of the middle. So you kind of need to leave a ‘hole’ there. Intuitive? Maybe not the most, but it’s a whole lot less complicated than having another set of masthead image upload options, right?


This particular option can be found by logging into your site's admin area and going to:
"Appearance" > "P3 Customize" > "Header" > "Layout & Appearance"

header-option-layout

This area allows you to choose from 24 different header arrangements involving:

  • Your logo (or none if you choose)
  • A masthead area (can be a static image, rotating image, or a flash slideshow)
  • Your blog’s main navigation menu

The thumbnail images should make this pretty self-explanatory, but there are a couple gotchas:

Sometimes, choosing a different layout can mean that the necessary size for your masthead image(s) changes. This is mostly true when switching to/from one of the first three layouts to something else. After you’ve selected the layout, you may have to resize and reupload your masthead images. If you see funny extra space in your masthead, or your images are being cropped, this is probably the problem. To find out what size you need to upload, just visit “Appearance” > “P3 Customize” > “Header” > “Masthead Image & Slideshow” area, which will advise you of what size images you need to have, and if your current images fit.

If you choose layout#2, which has a masthead on either side of the logo, you might think that you need to upload two sets of smaller masthead images. Well, you thought wrong. Basically you still upload full-width images and your logo sits on top of the middle. So you kind of need to leave a ‘hole’ there. Intuitive? Maybe not the most, but it’s a whole lot less complicated than giving you another whole set of masthead image upload options, right? -/-

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us