How To Create A Sticky Navigation Menu In WordPress

570
0
How to Create A Sticky Navigation Menu In WordPress

In this article, we will prove you how to create a sticky navigation menu in WordPress website for beginners. Have you observed that many popular websites are now using sticky navigation menu?

We hope this article helped you how to add sticky floating navigation menu bar to your WordPress website.

Normally, navigation menus are displayed on top and disappear as users scroll down.

Sticky navigation menus float as users scroll down and are always visible on the cover.

Method 1: How to Create A Sticky Navigation Menu In WordPress

This method takes you to add custom CSS code to your theme.

If you haven’t done this before, then please understand our guide on how to easily add custom CSS to your WordPress website.

The very first thing, you need to visit Appearance » Customize to launch theme customizer option.

Further, Click on ‘Additional CSS’ in the left pane if your WordPress theme allows that option and then add this CSS code.

#website-navi {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}

Replace #website-navi with the CSS ID of your primary navigation menu and click on the Save & Publish button.

You can directly visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the situation header, then this CSS code could overlap the site title and header.

This can be easily set by adding a margin to your header area using some CSS like this:

.site-branding {
margin-top:60px;
}

Replace .site-bran class with the CSS class of your header area.

Method 2: How to Create A Sticky Navigation Menu In WordPress

This method is gentler and is recommended for all users.

If you haven’t setup the navigation menus yet, then please understand our guide on how to add a navigation menu in WordPress.

The first thing you necessitate to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin.

For more details, see our step by step guide on how to set up a WordPress plugin.

After activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.

First, you need to go into the CSS ID of the navigation menu that you want to make sticky.

You will require using your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and get hold of your mouse to the navigation menu.

After that, you just need to right click on the specific area and select Inspect element from your browser’s menu.

This will split your browser screen, and you will be able to view the source code for your navigation menu.

You need to detect a line of code like this:

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>

In this case, our navigation menu’s CSS ID is site-navigation. Go ahead and enter the navigation CSS ID in the plugin settings like this #website-navi.

The next option on the plugin’s settings page is to determine the space between the top of your screen and the sticky navigation menu.

You can apply this setting if your menu is overlapping an element that you do not want to be hidden.

If not, then ignore this context.

After doing that, you just need to click on the checkbox next to the option: ‘Check for Admin Bar’.

This allows the plugin to add some space to the WordPress admin bar which is just added for logged-in users.

The next selection in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as an android, IOS device.

You can test how it looks on mobile devices or pills.

If you don’t like it, then you can add 780px for this alternative.

Don’t forget to flick on the save settings button to store your changes.

You can now visit your website to find out your sticky floating navigation menu in action.

We hope this article helped you how to create a sticky navigation menu in WordPress website.

Get started on WordPress today and start turning your spare time into spare cash.

I’m wishing you the best of luck!

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Facebook and Twitter.

Don’t forget to share this article with your friends.

Best of luck and have a great flight!

Did you find this guide valuable? If yes, then Please share it with your friends, fellows, classmates, roommates or with the public.

LEAVE A REPLY

Please enter your comment!
Please enter your name here