Sunday, May 19, 2024
HomeBusinessThe Sticky Floating Navigation Menu in WordPress

The Sticky Floating Navigation Menu in WordPress


Make it rain

A sticky floating navigation menu stays on prime of the display screen as a consumer scrolls down the web page. Some WordPress themes have this characteristic inbuilt, as an choice of their settings.

But when your theme doesn’t have this cool characteristic, don’t fret, there’s a workaround.

You’ve got the choice of inserting just a little coding into your web site that may preserve the menu stationed on the prime of the window, to your customers to get to always.

Why & when a sticky floating navigation menu is useful

Usually, the first navigation menu sits on the prime of the location and incorporates hyperlinks to the first — if not all — pages of your web site. A sticky floating navigation menu makes these hyperlinks accessible always, which saves folks from having to scroll all the way in which again to the highest to entry one other part of the location.

Having a sticky menu has been confirmed to extend conversions. Making it rain, because it had been.

In the event you occur to have a web-based retailer, then your prime navigation menu can have hyperlinks to the product classes, cart, and the product search characteristic. In the event you make the most of a sticky menu, this can show you how to decrease cart abandonment and will feasibly enhance your gross sales! (Once more, making it rain.)

Some paid WordPress themes have built-in coding for a sticky floating navigation menu. To verify in case your theme has this feature, go to Themes > Customise to allow it. In case your theme doesn’t have sticky menus inbuilt, then you’ll want to roll up your sleeves and perform a little coding.

Don’t fear although, it’s not too terribly tough to deal with.

Coding your sticky floating navigation menu

Earlier than doing any laborious coding to your prized web site, remember to all the time first create a backup of the location and all the time code in your baby theme, not your father or mother theme.

Now, in an effort to add the required code to allow your fancy sticky menu, you’ll be able to go to Look > Customise to launch the WordPress theme customizer. Now click on on Further CSS from the left menu and add this CSS code:

#site-navigation {

background:#000000;

top:60px;

z-index:170;

margin:0 auto;

border-bottom:1px stable #ffffff;

width:100%;

place:fastened;

prime:0;

left:0;

proper:0;

text-align: middle;

}

It will create a navigation menu with a black background. In the event you want a definite colour, change the quantity subsequent to background, like #fefefe, for instance. Additionally, remember to exchange the #site-navigation with the CSS ID of your present navigation menu and choose the Publish button on the prime of the display screen.

Notice: Yow will discover the CSS ID by opening up the inspector window in your favourite browser. Refresh your web site and see what coolness you could have created. This coding is however one instance. There are every kind of customizations you’ll be able to give you. Design to your coronary heart’s content material.

“That is nice and dandy, however my menu usually is displayed beneath the location header as an alternative of above it.”

If that’s the case, this new CSS code may overlap the location title and header or present up too near it earlier than the consumer scrolls. Easy repair! You merely have so as to add a margin to your header space utilizing some extra CSS code:

.site-brand {

margin-top:60px !vital;

}

Exchange site-brand with the CSS class of your header space. Now, the sticky navigation menu gained’t intrude along with your header earlier than the consumer scrolls down.

Closing ideas

Coding will be enjoyable, however all the time bear in mind to edit your baby theme, not the father or mother theme. (As talked about above.) And again up your web site! In any other case, in the event you break all of the issues, you may be out of luck, and when your theme will get an replace, all of your coding could possibly be washed away just like the sands of time.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments