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:

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: 

 

 

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:


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: 

 

 

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