{"id":93476,"date":"2026-03-27T12:44:55","date_gmt":"2026-03-27T17:44:55","guid":{"rendered":"https:\/\/www.bricktowntom.com\/blog\/?p=93476"},"modified":"2026-03-27T12:44:55","modified_gmt":"2026-03-27T17:44:55","slug":"setting-up-the-sticky-floating-navigation-menu-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.bricktowntom.com\/blog\/03\/setting-up-the-sticky-floating-navigation-menu-in-wordpress.html","title":{"rendered":"Setting up the sticky floating navigation menu\u00a0in WordPress"},"content":{"rendered":"

A sticky floating navigation menu stays on top of the screen as a user scrolls down the page. Some WordPress themes<\/a> have this feature built in, as an option in their settings.<\/p>\n

\n

But if your theme doesn\u2019t<\/em> have this cool feature, don’t fret, there is a workaround.<\/p>\n<\/blockquote>\n

You have the option of inserting a little coding into your site<\/a> that will keep the menu stationed at the top of the window, for your users to get to at all times.<\/p>\n

Why & when a sticky floating navigation menu comes in handy<\/h2>\n

Typically, the primary navigation menu sits at the top of the site and contains links to the primary \u2014 if not all \u2014 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.<\/p>\n

\n

Having a sticky menu has been proven to increase conversions. Making it rain, as it were.<\/p>\n<\/blockquote>\n

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.)<\/p>\n

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<\/strong> > Customize<\/strong> 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.<\/p>\n

Don\u2019t worry though, it\u2019s not too terribly difficult to tackle.<\/p>\n

Coding your sticky floating navigation menu<\/h2>\n

Before doing any hard coding to your prized site, be sure to always<\/strong> first create a backup of the site and always<\/strong> code on your child theme<\/strong>, not your parent theme<\/strong>.<\/p>\n

Now, in order to add the necessary code to enable your fancy sticky menu, you can go to Appearance<\/strong> > Customize<\/strong> to launch the WordPress theme customizer. Now click on Additional CSS<\/strong> from the left menu and add this CSS code:<\/p>\n

#site-navigation {\r\n\r\nbackground:#000000;\r\n\r\nheight:60px;\r\n\r\nz-index:170;\r\n\r\nmargin:0 auto;\r\n\r\nborder-bottom:1px solid #ffffff;\r\n\r\nwidth:100%;\r\n\r\nposition:fixed;\r\n\r\ntop:0;\r\n\r\nleft:0;\r\n\r\nright:0;\r\n\r\ntext-align: center;\r\n\r\n}\r\n<\/pre>\n
This will create a navigation menu with a black background. If you need a distinct color, change the number next to background, like #fefefe<\/strong>, for example. Also, be sure to replace the #site-navigation<\/strong> with the CSS ID of your current navigation menu and select the Publish<\/strong> button at the top<\/em> of the screen.<\/p>\n
Note:<\/strong> 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\u2019s content.<\/p>\n
\n
\u201cThis is fine and dandy, but my menu normally is displayed below the site header instead of above it.\u201d<\/p>\n<\/blockquote>\n
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:<\/p>\n
.site-brand {\r\n\r\nmargin-top:60px !important;\r\n\r\n}\r\n<\/pre>\n
Replace site-brand<\/strong> with the CSS class of your header area. Now, the sticky navigation menu won\u2019t interfere with your header before the user scrolls down.<\/p>\n
Closing thoughts<\/h2>\n
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.<\/p>\n
The post Setting up the sticky floating navigation menu\u00a0in WordPress appeared first on GoDaddy Blog<\/a>.<\/p>\n
Source: Go Daddy Garage<\/p>\n
Republished by  Blog Post Promoter<\/a><\/small><\/p>","protected":false},"excerpt":{"rendered":"
A sticky floating navigation menu stays on top of the screen as a user scrolls down the page. Some WordPress themes have this …<\/p>\n","protected":false},"author":1,"featured_media":93477,"comment_status":"false","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23511],"tags":[126],"class_list":["post-93476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ebusiness-emarketing","tag-information"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/wordpress-552924_12801-300x169-1.jpg?fit=300%2C169&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p3k0YU-ojG","jetpack-related-posts":[{"id":93656,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/woocommerce-wednesdays-help-customers-find-and-buy-more-products-with-woocommerce-navigation.html","url_meta":{"origin":93476,"position":0},"title":"WooCommerce Wednesdays: Help customers find and buy more products with WooCommerce navigation","author":"admin","date":"April 1, 2026","format":false,"excerpt":"You work hard to create great products and drive visitors to your WooCommerce store. However, people can only buy the products that they can find. Once on your site, it\u2019s essential for shoppers to have an easy way to move throughout your site and find the items they are interested\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93777,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/8-css-javascript-snippets-for-building-mega-menus.html","url_meta":{"origin":93476,"position":1},"title":"8 CSS & JavaScript Snippets for Building Mega Menus","author":"admin","date":"April 3, 2026","format":false,"excerpt":"When it comes to website navigation, the old rule of thumb is that content should be no more than a click or two away. It\u2019s all about ensuring users can find what they need without having to jump through hoops. But the more content you have, the more difficult it\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":92758,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/8-css-javascript-snippets-that-enhance-hamburger-menus.html","url_meta":{"origin":93476,"position":2},"title":"8 CSS & JavaScript Snippets That Enhance Hamburger Menus","author":"admin","date":"April 1, 2026","format":false,"excerpt":"The hamburger menu has become synonymous with mobile apps and websites. It neatly hides navigation items until users need them. They\u2019re great for saving space when screen real estate is limited. And we\u2019re also seeing them utilized more on desktop devices as well. This makes sense for large, complicated menus\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93021,"url":"https:\/\/www.bricktowntom.com\/blog\/03\/how-to-dial-in-the-one-page-wordpress-website.html","url_meta":{"origin":93476,"position":3},"title":"How to dial in the one-page WordPress website\u00a0","author":"admin","date":"March 23, 2026","format":false,"excerpt":"If you\u2019re looking to offer a more affordable (and easier to build)\u00a0solution for a client\u2019s business, online portfolio, and much more, you may want to consider a one-page WordPress website. One-page websites are simple, popular and \u2014 when built on Managed WordPress \u2014 easy for nearly anyone to maintain. However,\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93605,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/woocommerce-wednedays-make-it-easy-to-find-products-in-woocommerce.html","url_meta":{"origin":93476,"position":4},"title":"WooCommerce Wednedays: Make it easy to find products in WooCommerce","author":"admin","date":"April 8, 2026","format":false,"excerpt":"Site navigation is an essential part of the user experience for ecommerce customers. If you want users to have a positive experience, you need to make it easy for them to find products in a WooCommerce store. Search functionality is a key piece of the site navigation puzzle, as it\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/08\/woman-3040029_12801-300x200-1.jpg?fit=300%2C200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":92941,"url":"https:\/\/www.bricktowntom.com\/blog\/03\/configure-client-access-with-block-locking-in-wordpress.html","url_meta":{"origin":93476,"position":5},"title":"Configure client access with block locking in WordPress","author":"admin","date":"March 21, 2026","format":false,"excerpt":"Any time you build a website for a client, you might struggle with just how much access they should have on their own site. In theory, they should be trusted as an administrator. But what if you don\u2019t want them rearranging content on the site, or modifying other design elements?\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/93476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/comments?post=93476"}],"version-history":[{"count":3,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/93476\/revisions"}],"predecessor-version":[{"id":102566,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/93476\/revisions\/102566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media\/93477"}],"wp:attachment":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media?parent=93476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/categories?post=93476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/tags?post=93476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}