The Sticky Floating Navigation Menu in WordPress

0
28


Make it rain

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

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

You’ve the choice of inserting somewhat coding into your website 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 turns out to be 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 website. 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 location.

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

Should you occur to have a web based retailer, then your prime navigation menu may have hyperlinks to the product classes, cart, and the product search function. Should you make the most of a sticky menu, it will assist you 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 inbuilt, then you’ll want to roll up your sleeves and perform a little coding.

Don’t fear although, it’s not too terribly troublesome to sort out.

Coding your sticky floating navigation menu

Earlier than doing any laborious coding to your prized website, make sure to all the time first create a backup of the location and all the time code in your youngster theme, not your guardian theme.

Now, in an effort to add the mandatory code to allow your fancy sticky menu, you may go to Look > Customise to launch the WordPress theme customizer. Now click on on Extra CSS from the left menu and add this CSS code:

#site-navigation {

background:#000000;

peak:60px;

z-index:170;

margin:0 auto;

border-bottom:1px strong #ffffff;

width:100%;

place:fastened;

prime:0;

left:0;

proper:0;

text-align: heart;

}

This may create a navigation menu with a black background. Should you want a definite coloration, change the quantity subsequent to background, like #fefefe, for instance. Additionally, make sure 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.

Observe: Yow will discover the CSS ID by opening up the inspector window in your favourite browser. Refresh your website and see what coolness you might have created. This coding is however one instance. There are all types of customizations you may provide you with. 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 might overlap the location title and header or present up too near it earlier than the person scrolls. Easy repair! You merely have so as to add a margin to your header space utilizing some further CSS code:

.site-brand {

margin-top:60px !essential;

}

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

Closing ideas

Coding could be enjoyable, however all the time bear in mind to edit your youngster theme, not the guardian theme. (As talked about above.) And again up your website! In any other case, in the event you break all of the issues, you might 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here