Over the past few days I have run across numerous websites that incorporated a floating navigation bar. Basically, as you scroll from top to bottom on the website, the navigation bar/menu will always be visible across the top. Notice the navigation bar on my site “stays put” as you scroll. I was shocked to learn how fast this could be implemented via CSS. Here are the steps;
- Decide what you want to float. In my case I wanted the entire #header div to float along with the menu to include the black background.
- Add the following to the CSS of the element: position:fixed.
- Adjust spacing and margins accordingly to the elements around the “div”.
Post below your examples after using this tutorial
Need Help With WordPress? Check Out Our WordPress Support Website!