How to make navigation menu stick on top of the page

You have probably seen websites where navigation menus stick on top of the page and follow you every step on your scrolling adventure. That feature might be something you want on your WordPress website and in this article, we’re show you how to create one.

Not only it has a functional side where the menu is always available on reach of your hand, it can also look very beautiful and fluid.

If you have a bit of CSS knowledge, you won’t be having problems with making your menu sticky. You only have to add a piece of code to your Style.css after which you can enjoy your new menu feature.

  1. Open your Stylsheet (style.php)
  2. Find .nav-menu or .genesis-nav-menu (or similar, depending on the theme you are using)
  3. Use the following code for you main menu container:
  4. .nav-menu {
    position:fixed;
    background: #333;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index:99;
    }

    As you can guess from the code, the important part comes at the second line where you need to fix the position of you menu. After that, you can set the the top, right and left elements to 0 pixels or move them to any distance from top or from left and right margin of the page (for example: top: 10px will place your menu 10 pixels from the top margin of your site).

  5. Update your file and enjoy your sticky navigation menu

If you don’t like messing with the code, you can use plugins to make your menus sticky.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *