How To Make Sticky Navigation Menu in WordPress

How To Make Sticky Navigation Menu in WordPress

Do you want to create a sticky navigation menu in your WordPress website. Some WordPress themes by default have a sticky or floating navigation menu, some even provide options to set your navigation menu to sticky or non-sticky.

In this article I will show you two methods to make your navigation menu is WordPress if the your theme navigation menu isn’t sticky.

A sticky or floating navigation menu is a menu that sticks to the top of your site as a user scrolls down the site. With a floating navigation, your menu appears to the user every time making navigation around the site very easy.

The First Method is With a Plugin

Note that this method is the easiest method because it doesn’t require knowledge of CSS ( Cascading Styles Sheet).

In your dashboard, search, install and activate Sticky Menu, Sticky Header (or Anything!) on Scroll.

Sticky Menu, Sticky Navigation Menu Plugin - Techs Jardin

Under settings, click on Sticky Menu (or Anything!) to setup the plugin.

Notice that in Sticky Element (required) input box I typed in (#navbar) – this is the CSS ID of the navigation menu. Now don’t get scared if you don’t know CSS, like i said earlier you don’t need CSS knowledge in this method.

You will need to get the CSS ID or class of your main navigation menu. The name of the CSS ID or Class varies depending on your theme (Class is represented with dot . while ID is represented with harsh #).

To get the CSS ID or class of your main navigation menu, take your mouse curser to the navigation menu, right click and choose Inspect (using Chrome) or Inspect Element (Q) using firefox. I am using Chrome for this Tutorial.

It will split your window into two, one side displays your site while the other side displays the HTML and CSS code of the web page. On the code area, look out for the ID or class of your navigation menu. If you aren’t sure it’s the ID or class of the Nav menu, click your mouse on the line of code, it will highlight the entire navigation menu as shown in the image below.

Inspect Page Source - Sticky Navigation Menu - Techs Jardin

For my site, my navigation menu ID and Class is navbar, so my ID is #navbar, click on save changes. Refresh your site to see the sticky navigation menu in action action. Don’t forget the leave the option “Move the sticky element down a little if there is an Administrator Toolbar at the top (for logged in users)” checked so that your sticky menu will not appear at the WordPress admin top menu.

Sticky Menu Plugin Setup - Techs Jardin
Sticky Navigation Menu - Techs Jardin
The Second Method Using CSS Code

This method will require you to have a little knowledge of CSS. You will require to add a custom CSS code to your WordPress website.

In your WordPress dashboard under appearance, select Customize >> Additional CSS. Paste the CSS code below into the Additional CSS box and save changes. Check your navigation menu to see the changes.

#site-navigation {
    background:#00000;
    height:50px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Note that height depends on the number of menu items.

WATCH THE VIDEO BELOW

Share This Post

Leave a Reply

Your email address will not be published.

88 − = 85