Tuesday, September 27, 2022
HomeSmall BusinessThe Sticky Floating Navigation Menu in WordPress

The Sticky Floating Navigation Menu in WordPress


Make it rain

A sticky floating navigation menu stays on high of the display as a consumer scrolls down the web page. Some WordPress themes have this function in-built, as an possibility of their settings.

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

You could have the choice of inserting a bit coding into your web site that can preserve the menu stationed on the high of the window, on your customers to get to always.

Why & when a sticky floating navigation menu turns out to be useful

Sometimes, the first navigation menu sits on the high of the positioning 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 individuals from having to scroll all the best way again to the highest to entry one other part of the positioning.

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

For those who occur to have an internet retailer, then your high navigation menu could have hyperlinks to the product classes, cart, and the product search function. For those who make the most of a sticky menu, it will enable you 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 examine in case your theme has this selection, go to Themes > Customise to allow it. In case your theme doesn’t have sticky menus in-built, then it would be best 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 exhausting coding to your prized web site, make sure to all the time first create a backup of the positioning and all the time code in your youngster theme, not your father or mother theme.

Now, so as to add the required code to allow your fancy sticky menu, you may 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 strong #ffffff;

width:100%;

place:mounted;

high:0;

left:0;

proper:0;

text-align: middle;

}

This can create a navigation menu with a black background. For those who want a definite colour, change the quantity subsequent to background, like #fefefe, for instance. Additionally, make sure to substitute the #site-navigation with the CSS ID of your present navigation menu and choose the Publish button on the high of the display.

Observe: You could find the CSS ID by opening up the inspector window in your favourite browser. Refresh your web site and see what coolness you will have created. This coding is however one instance. There are all types of customizations you may give you. Design to your coronary heart’s content material.

“That is nice and dandy, however my menu usually is displayed beneath the positioning header as a substitute of above it.”

If that’s the case, this new CSS code might overlap the positioning 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 !necessary;

}

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

Closing ideas

Coding might be enjoyable, however all the time bear in mind to edit your youngster theme, not the father or mother theme. (As talked about above.) And again up your web site! In any other case, for those who break all of the issues, you may be out of luck, and when your theme will get an replace, all of your coding may very well 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