This week’s iThemes Builder 101 will show you how to easily turn the Builder Navigation module into a “locked” or “sticky” navigation bar that will remain on screen, even as the user scrolls down the page, using only a few lines of simple CSS.
Targeting the Navigation Module
The first thing you’ll need is a Navigation module. You’ll want to add a Navigation Module at the very top of your default site layout, or in any layouts on your site that will be utilizing this type of navigation.
Next, we’ll need a way to target this specific module. For this, we’ll be using a little trick we’ve used before in several other Builder 101 courses. When you’re logged in as an administrator, you can right-click anywhere on the site and choose “View Page Source” to view the source code of your page. Within this, you’ll find a large comment block that will display the IDs of all modules, as they appear on the page. The top one should be the ID for your Navigation module, so copy it and head over to your CSS.
Styling the Navigation Module
Now head over to your theme’s stylesheet, either in a text editor or under Appearance > Editor within WordPress. Scroll all the way down to the bottom to your custom style section, or create one if you don’t already have one. Here you’ll create a selector for your Navigation module using the ID you copied from your source code.
However, depending on the styling that you want to add, that may not yet be the exact selector that you need. If you wanted to change the background color of your module to solid black, for instance, you’ll notice that it doesn’t exactly do what you expected it to.
That’s because the module itself is only stretching to the max-width of the layout, which in this case is 960 pixels. So how can we get around this? Well, if you’ve been watching some of the latest Builder 101 courses, you should be a bit more familiar with Builder’s class system. Knowing this, we’re going to slightly change the selector to target not the actual module itself, but the wrapper div containing it instead.
Now that we’re targeting the module’s wrapper div, the background color change will stretch the full width of the page. Next we’ll actually lock the module to the top of the page.
Setting the Navigation Module Position
Sticking the navigation module to the top of the page is actually quite easily done using the position property. There are several attributes you can set an element’s position to, but only two that will get the effect we want, which are absolute and fixed. It’s important to understand the difference between the two, so we’ll cover them briefly. Absolute positioning effectively removes the element or module from the normal flow of the page and it positions it absolutely on the somewhere on the screen, relative to closest parent element on the page with a specified position of its own. If nothing above it has a specified position, it will be relative to the entire HTML document.
Fixed positioning is similar, except that instead of being relative to another element on the page, it’s relative to the viewport or browser in which the page is being viewed. For instance, if you set something to a fixed position of 50 pixels away from the right, it would always be 50 pixels away from the right side of the screen, regardless of how big the viewport/browser it’s being viewed in is. This is extremely useful, but also a bit tricky. You should think carefully about how you intend for your site’s content to look across different screen sizes, especially when using fixed positioning. However, fixed positioning is ideal for creating our sticky menu, so it’s the position attribute that we’re going to stick with (no pun intended).
Now all we need to do is add one more property of “top: 0;”. This will actually position the module to the exact top of the viewport, where it will remain, even as the page scrolls. Pretty cool, huh?
Compensating for Fixed Positioning
You may have noticed though, that there’s one little problem. Because the fixed positioning actually removes the navigation module from the normal flow of the document, all the other modules below it now get pushed up to take its place. So now it’s covering up a bit of our header, and we definitely don’t want that. Luckily, that’s a pretty easy fix.
All we need to do is make a new selector targeting the second module on the page and add a bit of margin to the top of it to push it down the page a bit. You could go back into the source code and grab the ID for that specific module, but once again, using Builder classes will probably make your life a little easier. Instead, you can use the “builder-module-2” class to select the second builder module across all pages of your site that use this layout. Now all you need to do is add a bit of “margin-top”, the amount of which may vary depending on the size of your navigation module.
For this example we made a simple top navigation. However, you could just as easily do the same for a footer or a sidebar that would always be present on the screen. As I said before though, fixed positioning can be a bit tricky to reconcile, especially across different screen sizes. Whenever you use it, make sure to utilize media queries as necessary to keep your site looking good all the time.