Lock Your Navigation Bar to the Top of the ScreenLock Your Navigation Bar to the Top of the Screen

 

I had a client who absolutely loved how I fix the navigation menu on my PageLines site to the top of the screen, so it was always visible to site visitors as they scrolled down the page.

The process I’ve described here to lock your navigation bar to the top of the screen is applied to the PlatformPro PageLines theme platform on WordPress, but it can with a few modifications be applied to just about any WordPress theme.

If you’re familiar with PageLines you’ll see my instructions include just about all the variations you’ll need to use to lock your navigation bar to the top of the screen.  I’ve also included a quick and simple HTML variation at the end as well as a few notes on how to apply this to a Thesis theme.

You’ll find a lot of articles explaining how to do this simple little fix but they all seem to make the instructions more difficult than it really is and I much prefer a more simpler way of customizing and to fix the navigation bar to the top of the screen.

In my search for the solution, I’d been using the CSS position: fixed value for the header_area div.  While that did fix the header area (which, on the site in question, contained the navigation menu) to the top of the page, the content area moved up behind it so that the top few paragraphs of the page were obscured when the page first loaded. This is because using the position: fixed value removes the element it’s applied to from the normal flow of the page. You could think of it like lifting the header area up from the page so it’s still visible, but everything slides up behind it into the space it’s left behind.

When you Lock Your Navigation Bar to the Top of the Screen using a CSS position value of fixed, you’ll see that the navigation menu bar will move either to the left or right or I’ve seen it even move to the bottom.


In other words…the minute you “fix” this value you’re essentially modifying the header area div along with its CSS and then the new Div value has no corresponding CSS to control its placement.

So, if you’re using PageLines…here are the steps to modify your header area to lock your navigation bar to the top of the screen.  In this example I’m using the full width layout and the brandnav section in the top. 

Click on the “tab” to expand each Step:

In your brandnav.css file, modify these lines:

From this: #brandnav {padding: 13px 0px 11px;margin-bottom: .7em;}

To this:

#brandnav {background-color: #020070;box-shadow: 0 9px 6px #888888;margin-bottom: 0.7em;margin-top: -5px;padding: 13px 0 11px; position: fixed;width: 100%;}

(If you already have other values specified for this area div, simply add the position values as seen above and then tweak the margin and padding).

In your pro.css file, modify these lines:

From this:

#banners .content-pad { padding: 15px 0;height:0;margin-top:-20px; }
.banner_container .banner-area {margin-left: -45px;padding: 30px 0;}
.banner-content { font-size: 1.2em;line-height: 1.6em;margin-bottom: -35px;margin-top:-40px;}

To This:

#banners .content-pad {height: 0;margin-top: -2px;padding: 15px 0;}
.banner_container .banner-area {margin-left: -45px;padding: 1px 0;}
.banner-content {font-size: 1.2em;line-height: 1.6em;margin-bottom: -35px;margin-top: 45px;}

Note: Under normal circumstances at this point I would add a new function to create a buffer area and then add a buffer area css value however because Pagelines platform is designed with “Sections” and each section comes with its own margin and padding values…Hence no need to add a “buffer” area like you would for a Thesis Theme.

Next, you may have to tweak or modify the “header section” and/or the Content area section a little more until you’ve got the navigation menu bar situated where you want and locked to the top so that when you scroll up or down the navigation menu is fixed to the top.

In my live demonstration I used this code to tweak the content: #maincontent .content-pad {padding-top:60px;}

Hopefully with these simple steps you’ll lock your navigation bar to the top of the screen and when you scroll up or down you’ll see the navigation bar is fixed to the top.

Click here to see a live example website: 

LIVE DEMO

 

 

Thesis Website? 

If you’re using Thesis…here are the steps to modify your header area to lock your navigation bar to the top of the screen.  In this example I’m using the full width layout in Thesis. 

Click on the “tab” to expand each Step:

First you’ll need to add a “position:fixed” to your custom.css that will apply to the “header_area” selector. Example:

.custom #header_area { position: fixed; }

You must now add a new “div” in your custom.css and for our example we’ll call it “buffer height” as this will be the new div for the height area in the header that we replaced inadvertently with step 1 above. Example:

.custom #buffer { height: 100px; }

Now you’ll have to add the “new div” into the HTML for your page. Add your “new div” to your “thesis_hook_before_content_area” into yuor custom functions file. Example:

function buffer_area() { ?>
<div id=”buffer”></div>
<?php
}
add_action(‘thesis_hook_before_content_area’,’buffer_area’);


Hopefully with these simple steps you’ll lock your navigation bar to the top of the screen and when you scroll up or down you’ll see the navigation bar is fixed to the top.

Click here to see a live Thesis website:  Click here to see a live example website: 

LIVE DEMO

 

 

Note: If you’re working with a static HTML site…email us for assistance.

Famous Last Words –

A word of caution – I would suggest “not” to actually modify the CSS in either the Pro.css or the brandnav.css, edit and modify the code in the Custom.Css that comes standard in all PageLines themes.  I would never suggest you actually modify the css….I use the illustration above merely to guide and instruct you on what the code looks like in the style sheet.

Secondly, some browsers handle the position selector differently, so you may get some odd looking results in different browsers. Be sure to check how your site looks, at least in the most common browsers.  What I have found is older Internet Explorer browsers may give you the most odd looking results and you may find some very small differences in spacing between FireFox and Google Chrome.

I hope this quick and simple step by step process will help you customize your WordPress website and if you have any questions or would like to learn more….feel free to contact us.  Navigation Menus