A sticky floating navigation menu stays on top of the screen as a user scrolls down the page. Some WordPress themes have this feature built in, as an option in their settings.
But if your theme doesn’t have this cool feature, don’t fret, there is a workaround.
You have the option of inserting a little coding into your site that will keep the menu stationed at the top of the window, for your users to get to at all times.
Why & when a sticky floating navigation menu comes in handy
Typically, the primary navigation menu sits at the top of the site and contains links to the primary — if not all — pages of your site. A sticky floating navigation menu makes those links accessible at all times, which saves people from having to scroll all the way back to the top to access another section of the site.
Having a sticky menu has been proven to increase conversions. Making it rain, as it were.
If you happen to have an online store, then your top navigation menu will have links to the product categories, cart, and the product search feature. If you utilize a sticky menu, this will help you lower cart abandonment and could feasibly improve your sales! (Again, making it rain.)
Some paid WordPress themes have built-in coding for a sticky floating navigation menu. To check if your theme has this option, go to Themes > Customize to enable it. If your theme doesn’t have sticky menus built in, then you will want to roll up your sleeves and do a little coding.
Don’t worry though, it’s not too terribly difficult to tackle.
Coding your sticky floating navigation menu
Before doing any hard coding to your prized site, be sure to always first create a backup of the site and always code on your child theme, not your parent theme.
Now, in order to add the necessary code to enable your fancy sticky menu, you can go to Appearance > Customize to launch the WordPress theme customizer. Now click on Additional CSS from the left menu and add this CSS code:
#site-navigation {
background:#000000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #ffffff;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
This will create a navigation menu with a black background. If you need a distinct color, change the number next to background, like #fefefe, for example. Also, be sure to replace the #site-navigation with the CSS ID of your current navigation menu and select the Publish button at the top of the screen.
Note: You can find the CSS ID by opening up the inspector window in your favorite browser. Refresh your site and see what coolness you have created. This coding is but one example. There are all kinds of customizations you can come up with. Design to your heart’s content.
“This is fine and dandy, but my menu normally is displayed below the site header instead of above it.”
If that is the case, this new CSS code could overlap the site title and header or show up too close to it before the user scrolls. Simple fix! You simply have to add a margin to your header area using some additional CSS code:
.site-brand {
margin-top:60px !important;
}
Replace site-brand with the CSS class of your header area. Now, the sticky navigation menu won’t interfere with your header before the user scrolls down.
Closing thoughts
Coding can be fun, but always remember to edit your child theme, not the parent theme. (As mentioned above.) And back up your site! Otherwise, if you break all the things, you could be out of luck, and when your theme gets an update, all your coding could be washed away like the sands of time.
The post Setting up the sticky floating navigation menu in WordPress appeared first on GoDaddy Blog.
Source: Go Daddy Garage
Originally posted 2022-08-22 02:29:01. Republished by Blog Post Promoter