The Sticky Floating Navigation Menu in WordPress

A sticky floating navigation menu stays on top rated of the monitor as a consumer scrolls down the site. Some WordPress themes have this element created in, as an selection in their options.

But if your topic does not have this great aspect, do not fret, there is a workaround.

You have the option of inserting a very little coding into your internet site that will maintain the menu stationed at the top rated of the window, for your consumers to get to at all instances.

Why & when a sticky floating navigation menu arrives in handy

Usually, the main navigation menu sits at the major of the site and has inbound links to the major — if not all — web pages of your site. A sticky floating navigation menu would make all those hyperlinks available at all times, which saves folks from obtaining to scroll all the way again to the best to entry a different area of the web site.

Acquiring a sticky menu has been demonstrated to increase conversions. Building it rain, as it were.

If you come about to have an online retailer, then your prime navigation menu will have hyperlinks to the product categories, cart, and the solution search characteristic. If you use a sticky menu, this will help you lessen cart abandonment and could feasibly enhance your product sales! (Once more, creating it rain.)

Some compensated WordPress themes have crafted-in coding for a sticky floating navigation menu. To examine if your topic has this choice, go to Themes > Customise to empower it. If your theme doesn’t have sticky menus crafted in, then you will want to roll up your sleeves and do a little coding.

Don’t fret even though, it is not way too terribly tricky to tackle.

Coding your sticky floating navigation menu

Before carrying out any tough coding to your prized web-site, be positive to usually first create a backup of the web site and normally code on your child concept, not your mum or dad topic.

Now, in order to increase the needed code to empower your extravagant sticky menu, you can go to Physical appearance > Customize to launch the WordPress topic customizer. Now click on on Added CSS from the left menu and increase this CSS code:

#website-navigation 

history:#000000

height:60px

z-index:170

margin: vehicle

border-base:1px stable #ffffff

width:100%

placement:fastened

top:

still left:

proper:

text-align: centre

This will generate a navigation menu with a black background. If you want a distinct shade, alter the number subsequent to history, like #fefefe, for example. Also, be absolutely sure to replace the #website-navigation with the CSS ID of your current navigation menu and pick the Publish button at the leading of the screen.

Take note: You can locate the CSS ID by opening up the inspector window in your favourite browser. Refresh your web site and see what coolness you have created. This coding is but 1 example. There are all types of customizations you can come up with. Design and style to your heart’s articles.

“This is high-quality and dandy, but my menu commonly is shown down below the web-site header as a substitute of earlier mentioned it.”

If that is the case, this new CSS code could overlap the web page title and header or exhibit up as well close to it in advance of the consumer scrolls. Very simple resolve! You merely have to add a margin to your header region working with some supplemental CSS code:

.web page-brand name 

margin-best:60px !significant

Substitute web-site-manufacturer with the CSS course of your header location. Now, the sticky navigation menu won’t interfere with your header just before the user scrolls down.

Closing ideas

Coding can be pleasurable, but generally don’t forget to edit your baby concept, not the parent theme. (As talked about earlier mentioned.) And back up your web site! Normally, if you break all the things, you could be out of luck, and when your concept gets an update, all your coding could be washed away like the sands of time.