Lock 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: