{"id":27789,"date":"2021-05-04T07:47:00","date_gmt":"2021-05-04T12:47:00","guid":{"rendered":"https:\/\/www.hostgator.com\/blog\/?p=27789"},"modified":"2021-04-14T19:23:47","modified_gmt":"2021-04-15T00:23:47","slug":"create-floating-navigation-menu-wordpress","status":"publish","type":"post","link":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/","title":{"rendered":"How to Create a Floating Navigation Menu in WordPress"},"content":{"rendered":"\n<p>You found an awesome article. You read it all the way through the end, and the information made you want to check out more of what the website had to offer. But to browse the other pages on the site, you have to scroll all the way back up to the top of the page to find the menu.<\/p>\n\n\n\n<p>Sure, it only takes a few seconds. And sure, it\u2019s not <em>that<\/em> much of an inconvenience in the grand scheme of things. <\/p>\n\n\n\n<p>But when it comes to how people browse the web, a few seconds and a slight inconvenience can actually make the difference between whether or not people take an action, or click away from a page and move on with their day.<\/p>\n\n\n\n<p>If you want to make your website menu more visible and accessible, no matter where on the page a visitor is, one option you have is a floating navigation menu.<\/p>\n\n\n<div class=\"hgrp\"><h4>You might like&#8230;<\/h4><ul><li><span class=\"prod-icon\"><a href=\"https:\/\/www.hostgator.com\/services\/web-design\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"button\" data-element-label=\"web_design_services\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/web-design-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/web-design-150x150.png 150w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/web-design-300x300.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/web-design.png 500w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/span><a href=\"https:\/\/www.hostgator.com\/services\/web-design\" class=\"hgrp-link\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"link\" data-element-label=\"web_design_services\">Web Design Services<\/a><\/li><li><span class=\"prod-icon\"><a href=\"https:\/\/www.hostgator.com\/managed-wordpress-hosting\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"button\" data-element-label=\"wordpress_hosting\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-150x150.png 150w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-300x300.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting.png 500w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/span><a href=\"https:\/\/www.hostgator.com\/managed-wordpress-hosting\" class=\"hgrp-link\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"link\" data-element-label=\"wordpress_hosting\">WordPress Hosting<\/a><\/li><\/ul><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-floating-navigation-menu\">What is a Floating Navigation Menu?<\/h2>\n\n\n\n<p>A floating navigation menu, sometimes called a sticky navigation menu, is a menu that stays visible on the page even as you scroll down. No matter where a visitor is on the page, they\u2019ll see your menu options either along the top or side of the page.<\/p>\n\n\n\n<p>To help you visualize, here are two examples of what a floating navigation looks like. <a href=\"https:\/\/bookshop.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bookshop.org<\/a> keeps their floating navigation menu at the top of the screen:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/03\/sticky-menu-example.mov\"><\/video><\/figure>\n\n\n\n<p>While <a href=\"https:\/\/www.nicecream.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nicecream.com<\/a> keeps theirs along the side:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/03\/nicecream-floating-menu.mov\"><\/video><\/figure>\n\n\n\n<p>In both cases, the most important navigational links the business wants visitors to know stay with you as you move through the page.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-pros-of-using-a-floating-navigation-menu-on-your-website\">3 Pros of Using a Floating Navigation Menu on Your Website<\/h2>\n\n\n\n<p>Floating menus are a practical design feature to consider, since they add some useful functionality to your website. In particular, they provide three main benefits.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-a-floating-menu-keeps-your-most-important-pages-visible\">1. A floating menu keeps your most important pages visible.<\/h3>\n\n\n\n<p>'Out of sight, out of mind'\u009d may be an old adage, but it\u2019s one that still holds some truth. Many of your visitors will need to <em>see<\/em> a link in order to know the page it leads to is there as a possibility. And if those navigational links disappear while they\u2019re focused on perusing the content of the page they\u2019re on, it may never occur to them to go back and see what they missed.&nbsp;<\/p>\n\n\n\n<p>When you keep all your main pages visible the whole time a visitor\u2019s on the site, you ensure they can see their primary options for where to go next. And seeing them is the first step to considering a click.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-it-increases-the-chances-that-visitors-will-browse-more-of-your-website\">2. It increases the chances that visitors will browse more of your website.<\/h3>\n\n\n\n<p>One of the first lessons every website owner learns is how <em>hard<\/em> it is to get people onto your website to begin with. The hard work you put into marketing your site and earning traffic is worth a whole lot more if you can convince your visitors to stick around and check out more of your site than the first page they land on.<\/p>\n\n\n\n<p>Using a floating menu can help with that. When visitors have easy access to the menu of options available to them on the site, the chances that they\u2019ll see something they\u2019re interested in and click on it go up. <\/p>\n\n\n\n<p>According to <a href=\"https:\/\/contentsquare.com\/blog\/the-3-golden-rules-of-sticky-menu-navigation\/\" target=\"_blank\" rel=\"noopener noreferrer\">ContentSquare<\/a>,a retail website saw a significant decrease in bounce rates, and 10% increase in conversions after introducing a sticky navigation bar to their website. That\u2019s only one example, but it suggests that keeping the menu visible longer can yield real results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-it-improves-the-visitor-experience\">3. It improves the visitor experience.<\/h3>\n\n\n\n<p>In a <a href=\"https:\/\/clutch.co\/web-designers\/resources\/top-6-website-features-people-value\" target=\"_blank\" rel=\"noopener noreferrer\">2018 Clutch survey<\/a>, 94% of respondents cited <a href=\"https:\/\/www.hostgator.com\/blog\/create-website-navigation-menu\/\">easy navigation<\/a> as a useful website feature-making it the most popular answer. If you care about building a website that people find intuitive, making sure the menu is easy to find is an important part of the equation. And a floating navigation menu achieves that.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Gnn2hGcUfdmTOWo9HWBTBrBk69nVSCQipOGQOSjDG1uXLazDcBR9U3wxuHQdJ8Cwll18fk_0L0ZY0gNXcD0QEfJT4dEEm8rU6UUWdz-8v8Wj-fdVbY0ZLtVClZJ8G2Cg2SK2AccA\" alt=\"top 7 website features include easy navigation\"\/><\/figure>\n\n\n\n<p>While it\u2019s a few years old, a <a href=\"https:\/\/www.smashingmagazine.com\/2012\/09\/sticky-menus-are-quicker-to-navigate\/\" target=\"_blank\" rel=\"noopener noreferrer\">usability study<\/a> published in Smashing Magazine found that floating navigation menus made navigation 22% faster. When people can find what they\u2019re looking for faster, that creates a better overall experience. You can reduce frustration, and make the time they do spend on your site more worthwhile.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-3-cons-of-floating-navigation-menus\">3 Cons of Floating Navigation Menus<\/h2>\n\n\n\n<p>If the benefits were the only side of the story here, every website would use floating menus. But the choice to include a floating menu comes with some downsides as well.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-it-takes-up-space\">1. It takes up space.<\/h3>\n\n\n\n<p>When designing a website, space is at a premium. You want to be thoughtful about every bit of the page. If you try to pack in too many elements or too much information, your page will be cluttered and confusing. And any unnecessary information you include could distract from the most important parts of the page you want to draw attention to.&nbsp;<\/p>\n\n\n\n<p>In order for a floating menu to be visible on the page at all times, it must take up space on the page at all times. That\u2019s space it\u2019s taking away from something else. <\/p>\n\n\n\n<p>Web designers must carefully consider whether the information and value provided by the floating menu is worth the space it requires. In some cases the answer will be yes, but in others it\u2019s decidedly a no.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-it-may-annoy-some-visitors\">2. It may annoy some visitors.<\/h3>\n\n\n\n<p>We\u2019ve established that almost all visitors consider easy navigation crucial. But different people have different opinions on what that means. And you may well have visitors that are annoyed that a floating menu takes space away from the main thing they\u2019re trying to do on the page.&nbsp;<\/p>\n\n\n\n<p>That can particularly be a concern on mobile devices, if they have to put more effort into scrolling because the floating menu means they can\u2019t see as much else on the screen, you risk causing annoyance. <\/p>\n\n\n\n<p>And in some cases-if you\u2019re not careful in the design stage-a floating menu could end up blocking the content on the page, which would <em>definitely<\/em> cause annoyance.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-it-s-more-work-to-add-and-maintain-than-a-static-menu\">3. It\u2019s more work to add and maintain than a static menu.<\/h3>\n\n\n\n<p>If the WordPress theme you used to build your website has a static menu, then changing your website over to a floating menu will require extra work on your end. And making sure the menu still looks good with all future website updates can mean even <em>more<\/em> work. <\/p>\n\n\n\n<p>On top of that, with WordPress websites, every new plugin you add means one more thing you have to update, and every update means checking on a plugin\u2019s compatibility with the current WordPress version.<\/p>\n\n\n\n<p>That all adds up to more effort. For some website owners, the benefits won\u2019t be worth the extra time and energy you\u2019ll have to put toward adding and keeping floating navigation on your website.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-floating-navigation-menu-in-wordpress\">How to Add A Floating Navigation Menu in WordPress<\/h2>\n\n\n\n<p>If you have a WordPress website, adding a floating navigation menu doesn\u2019t have to require complicated coding. As a first step, check to see if the theme you used offers an easy way to enable a sticky navigation menu on your website. You can go to Appearance in the main menu, then select themes. There you\u2019ll see the option to select to Customize your theme.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/S6evi57gJONb_NDsAgEXzy_tx2pex3EFXj7-7vVWcfcLIPbukgddDZqd2OnjKX9oE0escd9w8oc_nvD7E1jpmE68cRbfl7l26JxSrCE_lhAY3GX_KRt8E562Fckiixo7ye1hgJ7H\" alt=\"customize theme in wordpress dashboard\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/dHB403I_6-Phbze78JEyk_TEWJpPG-bRFWq-rb5cZPgBjyMmS77534wwN2iGxfGSwOUy00Z6h2Jcmwrv7YxcA9uePxTwTBvr8ZugzqgUIqxeuZddDnJTt7tL2ZCamxS2VZkdUkxD\" alt=\"view theme details in wordpress\"\/><\/figure>\n\n\n\n<p>If your theme has built-in support for floating navigation, this is where you\u2019ll see the option to enable it.<\/p>\n\n\n\n<p>If not, your best bet is to use a plugin to add the functionality. A number of different WordPress plugins enable floating navigation menus. Some popular choices to consider are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/wordpress.org\/plugins\/mystickymenu\/\" target=\"_blank\" rel=\"noopener noreferrer\">My Sticky Menu<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/wp-floating-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Floating Menu<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/float-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">Float Menu<\/a>&nbsp;<\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/sticky-menu-or-anything-on-scroll\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sticky Menu, Sticky Header (or anything!) on Scroll<\/a><\/li><li><a href=\"https:\/\/codecanyon.net\/item\/hero-menu-responsive-wordpress-mega-menu-plugin\/10324895\" target=\"_blank\" rel=\"noopener noreferrer\">Hero Menu<\/a><\/li><\/ul>\n\n\n\n<p>Decide which plugin makes the most sense for your needs. Get it installed, then follow the plugin\u2019s setup instructions to get your menu working the way you want it to.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-make-it-float\">Make it Float&nbsp;<\/h2>\n\n\n\n<p>Your website may not <em>need<\/em> a floating menu, but if it will help your visitors find what they need faster and more easily, then adding one could be well worth it. <\/p>\n\n\n\n<p>Anything that improves the user experience and makes your visitors more likely to stick around and visit more pages on your site is a good thing. A floating navigation menu could be a useful tool to help you accomplish that.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You found an awesome article. You read it all the way through the end, and the information made you want&#8230;<\/p>\n","protected":false},"author":166,"featured_media":23704,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[127,133,121,131],"class_list":["post-27789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-hosting-tips","tag-web-design-services","tag-wordpress-design-themes","tag-wordpress-hosting","tag-wordpress-plugins"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.2 (Yoast SEO v23.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Floating Navigation Menu in WordPress - HostGator<\/title>\n<meta name=\"description\" content=\"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Floating Navigation Menu in WordPress\" \/>\n<meta property=\"og:description\" content=\"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"HostGator\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HostGator\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-04T12:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-15T00:23:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"604\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kristen Hicks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/atxcopywriter\" \/>\n<meta name=\"twitter:site\" content=\"@HostGator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kristen Hicks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\"},\"author\":{\"name\":\"Kristen Hicks\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5\"},\"headline\":\"How to Create a Floating Navigation Menu in WordPress\",\"datePublished\":\"2021-05-04T12:47:00+00:00\",\"dateModified\":\"2021-04-15T00:23:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\"},\"wordCount\":1404,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png\",\"keywords\":[\"Web Design Services\",\"WordPress Design Themes\",\"WordPress Hosting\",\"WordPress Plugins\"],\"articleSection\":[\"Web Hosting Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\",\"name\":\"How to Create a Floating Navigation Menu in WordPress - HostGator\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png\",\"datePublished\":\"2021-05-04T12:47:00+00:00\",\"dateModified\":\"2021-04-15T00:23:47+00:00\",\"description\":\"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png\",\"width\":1152,\"height\":604,\"caption\":\"how to add a floating navigation menu to wordpress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.hostgator.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Floating Navigation Menu in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"name\":\"HostGtaor\",\"description\":\"Web Hosting and Marketing Tips for Entrepreneurs\",\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\",\"name\":\"HostGtaor\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"width\":1092,\"height\":215,\"caption\":\"HostGtaor\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/HostGator\",\"https:\/\/x.com\/HostGator\",\"https:\/\/www.instagram.com\/hostgator\",\"https:\/\/www.linkedin.com\/company\/hostgator-com\",\"https:\/\/www.pinterest.com\/hostgator\/\",\"https:\/\/www.youtube.com\/user\/hostgator\"],\"email\":\"support@gator.com\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5\",\"name\":\"Kristen Hicks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g\",\"caption\":\"Kristen Hicks\"},\"description\":\"Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.\",\"sameAs\":[\"http:\/\/austin-copywriter.com\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/atxcopywriter\"],\"url\":\"https:\/\/www.hostgator.com\/blog\/author\/khicks\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Floating Navigation Menu in WordPress - HostGator","description":"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Floating Navigation Menu in WordPress","og_description":"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.","og_url":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/","og_site_name":"HostGator","article_publisher":"https:\/\/www.facebook.com\/HostGator","article_published_time":"2021-05-04T12:47:00+00:00","article_modified_time":"2021-04-15T00:23:47+00:00","og_image":[{"width":1152,"height":604,"url":"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png","type":"image\/png"}],"author":"Kristen Hicks","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/atxcopywriter","twitter_site":"@HostGator","twitter_misc":{"Written by":"Kristen Hicks","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/"},"author":{"name":"Kristen Hicks","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5"},"headline":"How to Create a Floating Navigation Menu in WordPress","datePublished":"2021-05-04T12:47:00+00:00","dateModified":"2021-04-15T00:23:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/"},"wordCount":1404,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png","keywords":["Web Design Services","WordPress Design Themes","WordPress Hosting","WordPress Plugins"],"articleSection":["Web Hosting Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/","url":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/","name":"How to Create a Floating Navigation Menu in WordPress - HostGator","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png","datePublished":"2021-05-04T12:47:00+00:00","dateModified":"2021-04-15T00:23:47+00:00","description":"Is a floating navigation menu the right choice for your website? Consider the pros and cons, then learn how to add one to your WordPress website.","breadcrumb":{"@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#primaryimage","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/09\/How-to-Set-Up-a-Menu-in-WordPress.png","width":1152,"height":604,"caption":"how to add a floating navigation menu to wordpress"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostgator.com\/blog\/create-floating-navigation-menu-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostgator.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Floating Navigation Menu in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.hostgator.com\/blog\/#website","url":"https:\/\/www.hostgator.com\/blog\/","name":"HostGtaor","description":"Web Hosting and Marketing Tips for Entrepreneurs","publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hostgator.com\/blog\/#organization","name":"HostGtaor","url":"https:\/\/www.hostgator.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","width":1092,"height":215,"caption":"HostGtaor"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HostGator","https:\/\/x.com\/HostGator","https:\/\/www.instagram.com\/hostgator","https:\/\/www.linkedin.com\/company\/hostgator-com","https:\/\/www.pinterest.com\/hostgator\/","https:\/\/www.youtube.com\/user\/hostgator"],"email":"support@gator.com"},{"@type":"Person","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/9ab81f8120a12dcfbd7d2ab946dab0a5","name":"Kristen Hicks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/457ef8a7379a7f4f39d7810b58ef0a0f?s=96&d=mm&r=g","caption":"Kristen Hicks"},"description":"Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.","sameAs":["http:\/\/austin-copywriter.com\/","https:\/\/x.com\/https:\/\/twitter.com\/atxcopywriter"],"url":"https:\/\/www.hostgator.com\/blog\/author\/khicks\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/27789"}],"collection":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/comments?post=27789"}],"version-history":[{"count":2,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/27789\/revisions"}],"predecessor-version":[{"id":27795,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/27789\/revisions\/27795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media\/23704"}],"wp:attachment":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media?parent=27789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/categories?post=27789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/tags?post=27789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}