How to Create a Sticky Menu in WordPress

Depending on the sort of site, you may want parts of the site, for example, the menu, to be floating or sticky. This article will teach you how to create a sticky menu in WordPress.

What Is a Sticky Menu and What Is Its Importance?

A sticky menu is a menu that adheres to the top of the page when the user looks down. This will make your menu always noticeable to users. In this part, we will create an important sticky menu together.

Usually, the sticky menu at the top of the navigation contains links to the main parts of a site. A sticky menu makes these links always noticeable, preventing users from scrolling up.

The navigation menu links shopping, item categories, and item search if you are running an online store. The stickiness of this menu can assist you with abandoning the shopping cart and increasing sales.

The absolute best WordPress subjects have implicit help for sticky menus. To enable this feature, just customize your subject settings in the “Topic” segment.

If your subject doesn’t have this choice, we’ll show you how to easily create a sticky navigation menu in any WordPress subject or WooCommerce store.

Method 1: Add you’re important sticky navigation menu using a plugin

This method is straightforward and the best answer for WordPress users and beginners.

For this reason, you want to install and activate Sticky Menu in the Scroll plugin.

After activation, to arrange the plugin settings, you want to do this from the Settings » Sticky Menu page.

First, you want to enter the CSS ID of the navigation menu that you want to be sticky.

You ought to use your program’s inspection tool to find the CSS ID used in your navigation menu.

Basically, visit your site and float over the navigation menu. After that, you want to right-click and select Inspect from your program menu.

In this part, you can watch the source codes of the navigation menu.

You ought to find a line of code related to your site’s navigation menu or header. It will look something like this.

In this case, the CSS ID is our navigation menu site navigation.

All you really want to do is enter the CSS ID of your menu with a hashtag at the beginning in the plugin settings. In this case, it’s # site navigation.

Remember to click the “Save Changes” button at the bottom of the page.

Let’s Check the Menu

Now, look at the menu straightforwardly on your WordPress site. The top of the page ought to remain static as you look down.

The following choice on the plugin settings page is to set the distance between the top of the page and the sticky navigation menu. If your menu overlaps with a component you don’t want to be stowed away, you should use this setting.

We prescribe checking the container close to the choice: “Check for Admin Bar“. This allows the plugin to add a space to the WordPress admin bar, which is simply noticeable to signed-in users.

If a user is visiting your site using a smaller screen, for example, a cell phone, the following choice allows you to eliminate the navigation menu.

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

You can test how your site is seen on portable or tablet devices. If you could do without the way it looks, just add 780px for this choice.

Remember to click the Save Changes button after making any changes to the available choices.

You might also like: Best WordPress Search Plugins to Improve Your Site’s Search

Method 2: Add Sticky Floating Navigation Menu Manually

This method expects you to add custom CSS code to the source code.

First, you want to use Appearance » Customize (personal settings) to launch the WordPress subject setting software.

Then, click on “Additional CSS” on the left side and add the CSS code.

#site-navigation {
background:#00000;
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;
}

Note: The above code creates a navigation menu with a black background. Change the number close to the background if you want a different variety. For example, using background: #ffffff gives you a white menu background.

Simply replace # site-navigation with the CSS ID of your navigation menu and then click the distribute button at the top of the page.

What if your navigation menu appears beneath the site title instead of above it? In this case, this CSS code could overlap the site endlessly title or appear extremely near it before the user looks down.

This can be easily customized by adding a boundary to the header segment using some additional CSS code:

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

Replace the site markup with the CSS class of your header area. Now, the sticky navigation menu will never again cover your header before the user looks down.

You may also like...

Leave a Reply

Your email address will not be published.