Sticky Header
Fixed position header & menu using only css
This support page has a sticky header and menu. Scroll down on this page to see the header area stay in a fixed position and not scroll with the page. This modification can be used on HTML 4.01, HTML5 and responsive websites and templates and uses script-free pure css.
See Also…
See Also…
How the sticky header works
Css "position: fixed" code and HTML div code is used to add this feature. This modification will work on most websites and templates, however, you may need to adjust the css style code for your specific design. This code is for horizontal menus.
Note: Once you add this script, you may need to adjust the spacer height of 150px. See adjustments at the bottom of this page.
Step 1.) Edit HTML
Select, copy and paste the following code to place a div and a div spacer around your header and/or menu code in your webpage. The spacer is needed to create space for your header area because we'll be locating the actual header and menu using a fixed position in the next step.
Below is an example using the above code added around the menu and header HTML code.
<div id="fixed-header">
<!-- HEADER -->
<script type="text/javascript" src="header.js"></script>
<!-- MENU -->
<script type="text/javascript" src="menu.js"></script>
</div>
<div id="header-fix-space"></div>
You'll need to add this to every HTML page, but do one page only and test before you proceed to the other pages.
Step 2.) Add CSS
Select, copy and paste the following code into your global style .css file. You can add it anywhere but you may want to place it at the bottom of the file. If you do not have a global css file, view the source code of this page to see how to add it to the html page <head> section.
Note: The spacer may have added too much or too little space and you may need to set the background color. See adjustments section below.
Step 3A.) Test
If your template is not a responsive design, you will want to test the HTML page to see that the sticky header is working. If it is, proceed to add the step #1 HTML code to all your webpages and see adjustments section below.
Step 3B.) Add Responsive CSS
If you have a responsive template (template that includes a "media-queries.css") you must add this code to the "media-queries.css" to make the header not sticky on mobile devices.
This will be tricky to add. You'll probably want to add it inside the START Media Queries #2 or Media Queries 740 or 482 section. In any case, it must be added inside one of the sections and you may need to experiment. Make a backup of the "media-queries.css" before you start! See testing media queries to check your work.
Why make mobile non-sticky?
There are two reasons. 1.) Mobile devices do not have enough screen real estate to display most sticky headers. 2.) In responsive webpages the header may change height as the browser narrows, so the spacer will create too much space under the header and menu.
Adjustments
Once you have setup the code in the above steps, you will probably need to adjust the css code for your design. Edit the following code you added in step #2:
#header-fix-space { height: 150px; }
#fixed-header {
background-color: #999999;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1500;
}
- If there is too much or too little space under the header adjust the "height: 150px;".
- Set the background color as desired. Optionally change #999999 to transparent.
- If other items are layering over the header, increase the z-index number.
- If you can not see your menu or header, or see just a large gray area, decrease the z-index number or try making the background-color: transparent;. This issue means the new code is layered over your header and menu. You may need to check the css used in your menu and header and adjust the z-index used in that css, or your menu may already be using css "position" code and this script may not work in your design.
Related Topics:
Template File Types
HTML Editing Software