Header Basics

There are many options on the header control panel, but most have default settings to give you a balance of control and ease of use.  The header is the area of the screen you see at the very top of your website.  You have a few basic options at the top of the header control panel screen to get you started:

Note: To get to this screen, first click the MENU/HEADER button on the main control panel and then click the EDIT HEADER/FOOTER button.

• Turn Header On/Off: This gives you a way to turn off the header if you don't want to use it on a particular page or to turn it on.  You can save your choices to "All Pages" on your website, or just the "Current Page"

• Header Height: This controls the basic height of your header measured in pixels. Note that this probably should say "minimum height", since your header height will grow dynamically if you add alot of text or add other elements that need more than the number of pixels you set here.  120 pixels is the default setting.  TIP: There are a number of "resize" selections that use a percentage of the header height.  Even if the header grows from the use of other larger elements, the system will still calculate the size of your image based on the height you enter here.

• Page Width:  This setting not only controls the width of your header area but it also controls the width of your main page. It can be used in place of the page size options on the various "work on content" screens.  The old Narrow SiteRightNow format is still available as well as the other SiteRightNow settings Wider 800 pixels, and Very Wide pixels.  I recommend using the 960 Standard setting for most websites. It is a width that fits on most screens and tablets and is one of the industry standards. You have a choice of saving this option to All Pages (which saves it every page on your website), or Just This Page (which just saves it on the current page and doesn't change other pages)  TIP: The "Centered Cropped Width" setting next to where you choose your TOP menu style also determines the width of your header. If you choose "Centered Cropped Width", the header will be constrained to the width you set here. If you choose "All the Way Across", the header will actually extend all the way to the end of your browser window no matter what you set as the page width. You can get a cool look with going "all the way across" and it will give you more room to work with as well. However, the page width setting still determines the width of the main part of your page.

• Margins: These selections allow you to show more white space between the edge of your header and your header text and graphics. The larger the number, the more space you will see between your header content and your header edges.   LEFT will nudge your objects away from left side of your header. TOP will nudge your objects down away from the top edge of your header. RIGHT will nudge your objects away from the right edge of your header, and BOTTOM will nudge your objects away from the bottom edge of your header. This comes in handy when graphics and text appear too close to the edges.  Defaults are zero.
  TIP: When you add margins, it's possible your header may expand past its page width boundaries if it requires too much room. To fix this, you may need to resize your logo or other objects or you could try the "all the way" setting back on your TOP menu selection screen, which will solve the problem and display your header all the way across your browser window.

Go Back to the TOP and use the left side menu for more of Mitch's Tips