EverWeb Codebox

Sticky Header and Navigation

The header used in this website sticks to the top of the page and always remains in view even when the contents are scrolled.

One method of doing this would be to create a header div in an HTML Snippet using CSS to style the background, h1 heading and any other content. This would have its position fixed in the styles. This works fine if you don't need the navigation to stick or you are using a custom navigation incorporated in the snippet.

If you need the convenience of the default, self generating navigation, read on...


Looking at the source code of the HTML doc created by the application it can be seen that there is an HTML5 header tag. This is the key...

<header></header>

Rather than having to use divs with IDs, HTML5 allows us to use descriptive tags for items like the header, navigation, aside footer and a few others.

This is an example of how to style the header div, fix it in postion and bring it to the front using the z-index property...

<style type="text/css">

header {

     display:block; /* Defining the element as a block */     

     height:100px; /* Same height as the header set in the Page inspector */

     background:#2D2D2D; /* Hex color or image URL */

     margin:0;

     padding:0;

     width:980px; /* Same width as the Page width set in the Page inspector */    

     position:fixed; /* Sticks the header to the top of the browser window */

     z-index:999; /* set to a value slightly less than the navigation - see note below */

}

</style>

Paste the CSS into the site wide Head Code box in the Site Publishing Settings page.

Set the Header height in the EW Page inspector to the same height as in the header styles for each page of the site.

Create the <h1>Website Name</h1> in an HTML Snippet, resize the snippet to suit using the Metrics inspector and command drag it into the header.

Use the "Arrange" menu to bring it to the front or use - Shift + Command + F

Install the default navigation and command drag it in if it is not already there.


NOTE that the header and navigation customizations will only be visible in Preview or when the published site is launched in the browser.

Z-Index

The z-index property is used to stack web page elements from the back to the front. An element with a high z-index will appear in front of one with a lower z-index.

The default value for z-index is zero. Objects can be sent further to the back using a negative value.

The EverWeb default navigation has its z-index set to 1000 so the header div's is set to 999. This places the header background behind the navigation and in front the page content.

Header Setup