{"id":1717,"date":"2017-11-06T09:51:24","date_gmt":"2017-11-06T09:51:24","guid":{"rendered":"http:\/\/www.sanjaywebdesigner.com\/articles\/?p=1717"},"modified":"2017-11-06T09:56:50","modified_gmt":"2017-11-06T09:56:50","slug":"create-sticky-fixed-navbarmenu-bar","status":"publish","type":"post","link":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/","title":{"rendered":"How To a Create Sticky or Fixed Navbar\/Menu bar"},"content":{"rendered":"<div class=\"4b5c905834746893f548144bd2becc18\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- blog last -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:inline-block;width:336px;height:280px\"\r\n     data-ad-client=\"ca-pub-8831529092902674\"\r\n     data-ad-slot=\"8814291746\"><\/ins>\r\n<script>\r\n(adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\n<\/div>\n<h1><strong>How To a Create Sticky or Fixed Navbar\/Menu bar<\/strong><\/h1>\n<p>A fixed navigation bar, likewise described as a &#8220;sticky&#8221; navigation bar, is a toolbar that remains in area while the user is scrolling the web page.\u00a0It&#8217;s a commonly-used site navigation design pattern for displaying a site&#8217;s major navigation menu, along with other important interface elements such as a search box, social networks switches, and also notifications. The design pattern guarantees that crucial user interface elements are easily readable as well as accessible no matter where the user currently is on a website.\u00a0In this <a href=\"http:\/\/www.bapugraphics.com\/html-and-css-tutorial-css-positioning-training.php\"><strong>How To a Create Sticky or Fixed Navbar\/Menu bar<\/strong><\/a> tutorial, I&#8217;ll walk you through a straightforward CSS technique for executing a leading horizontal fixed navigation bar.<\/p>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1719\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\" alt=\"How To a Create Sticky or Fixed Navbar\/Menu bar\" width=\"1000\" height=\"600\" srcset=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg 1000w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar-300x180.jpg 300w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar-768x461.jpg 768w, https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar-660x396.jpg 660w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h3><strong>Examples:<\/strong><\/h3>\n<p>Before we start with the tutorial, it&#8217;s probably best if we check out some websites that have fixed navigation bars, just to make sure we get on the exact same web page, as well as to show you practical applications of the design pattern.<\/p>\n<p>Niice has a fixed navigation bar which contains a search box and the website&#8217;s navigation food selection. While you&#8217;re browsing designs for motivation, you can quickly filter them with very little interruption to your experience merely by utilizing the search box on top of your display.<\/p>\n<p><a href=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/fixed-navigation-bar.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1718\" src=\"http:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/fixed-navigation-bar.gif\" alt=\"How To a Create Sticky or Fixed Navbar\/Menu bar\" width=\"550\" height=\"440\" \/><\/a><\/p>\n<p>A fixed navigation bar is a good way of lessening the hold-up and disruption triggered by changing to a new job (browsing the site, visiting, or transferring to various other sections of the site). The design pattern, fundamentally, enhances usability through the application of Fitts&#8217; Law.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2><a href=\"http:\/\/www.bapugraphics.com\/html-and-css-tutorial-css-positioning-training.php\"><strong>Creating a Fixed Navigation Bar<\/strong><\/a><\/h2>\n<p>Since we&#8217;ve looked at a handful of real-world applications for the fixed navigation bar design pattern, in addition to briefly going over exactly how it could boost use, I&#8217;ll currently show you a quick and simple execution technique that just calls for HTML and CSS.<\/p>\n<h3><strong>HTML<\/strong><\/h3>\n<p>The markup required for is really minimal, simply a block-level aspect that will certainly hold the materials of the fixed navigation bar.<\/p>\n<p><strong>&lt;nav class=&#8221;fixed-nav-bar&#8221;&gt;<\/strong><\/p>\n<p><strong>&lt;!&#8211; Fixed navigation bar content &#8211;&gt;<\/strong><\/p>\n<p><strong>&lt;\/nav&gt;<\/strong><\/p>\n<p>For semiotics and improved interoperability-potential with third-party web solutions, like internet search engine robots thinking about finding and also comprehending your website&#8217;s IA, a nav component is an excellent option right here. The nav aspect also takes place to be a block-level component by default, which conserves us a line of CSS (crowning achievement).<\/p>\n<p>Nevertheless, if you &#8216;d rather not use the nav aspect, any kind of block-level element will certainly do, whether it&#8217;s an all-natural block-level aspect like a div or an inline element such as a period that&#8217;s assigned a screen: block CSS property\/value.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h3><strong>CSS<\/strong><\/h3>\n<p>Below&#8217;s the style guideline that makes the fixed navigation bar stay in location<\/p>\n<p><strong>.fixed-nav-bar {<\/strong><br \/>\n<strong> position: fixed;<\/strong><br \/>\n<strong> top: 0;<\/strong><br \/>\n<strong> left: 0;<\/strong><br \/>\n<strong> z-index: 9999;<\/strong><br \/>\n<strong> width: 100%;<\/strong><br \/>\n<strong> height: 50px;<\/strong><br \/>\n<strong> background-color: #00a087;<\/strong><br \/>\n<strong>}<\/strong><\/p>\n<p>Earlier, we offered our HTML element a class feature of fixed-nav-bar to make sure that we could apply the above style regulation to it.<\/p>\n<p>The last 3 buildings (size, elevation, as well as background-color) are editable; change their values according to your requirements.<\/p>\n<p>Let&#8217;s talk about the four essential CSS properties in charge of the magic in better information.<\/p>\n<p>Placement: fixed;<\/p>\n<p>Giving the position residential property a value of fixed positions bench about the viewport. This property statement allows the bar to sit tight also when the user is scrolling the paper.<\/p>\n<p><strong>top: 0;<\/strong><br \/>\n<strong>left: 0;<\/strong><br \/>\n<strong>right: 0;<\/strong><\/p>\n<p>Setting the top, left, as well as right residential or commercial properties to 0 avoids unintentional margins\/padding on top and also the sides of the fixed navigation bar.<\/p>\n<p><strong>Suggestion<\/strong>: If you prefer to have a fixed bar that&#8217;s persistently at the end of the viewport, which is another usual design pattern, just transform top: 0 to bottom: 0.<\/p>\n<p><strong>z-index: 9999;<\/strong><\/p>\n<p>An uncommonly high z-index value is used to dramatically decrease the possibility that an HTML aspect is made in addition to the fixed navigation bar, as long as there are nothing else z-index worths more than 9999.<\/p>\n<p>That&#8217;s all there is to it.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Keep in mind.<\/strong><\/h3>\n<p>In the demo, there&#8217;s additionally a very primary CSS-only responsive navigation menu. This menu is just a proof-of-concept, and it&#8217;s not production-ready. Because the focus of this tutorial is on building a fixed navigation bar, which could hold various kinds of food selections as well as other user interface elements, I will not be discussing that part of the demonstration. I&#8217;ll simply let you check out the resource code if you want to see how that part of the trial functions (if you&#8217;re having trouble or if you have concerns regarding it, just send me a tweet as well as I&#8217;ll be happy to assist out).<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.bapugraphics.com\/html-and-css-tutorial-css-positioning-training.php\">Click Here to see the tutorial and Demo for Fixed Navbar\/Menu Bar<\/a><\/p>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>How To a Create Sticky or Fixed Navbar\/Menu bar A fixed navigation bar, likewise described as a &#8220;sticky&#8221; navigation bar, is a toolbar that remains in area while the user is scrolling the web page.\u00a0It&#8217;s a commonly-used site navigation design pattern for displaying a site&#8217;s major navigation menu, along with other important interface elements such [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[864],"class_list":["post-1717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-designing","tag-how-to-a-create-sticky-or-fixed-navbarmenu-bar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer<\/title>\n<meta name=\"description\" content=\"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we&#039;ll walk you through a simple CSS technique for creating a fixed navigation bar.\" \/>\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.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer\" \/>\n<meta property=\"og:description\" content=\"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we&#039;ll walk you through a simple CSS technique for creating a fixed navigation bar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Sanjay Web Designer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sanjaywebdesigner\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/sanjay73jain\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-06T09:51:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-06T09:56:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sanjay Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/sanjaywebdesign\" \/>\n<meta name=\"twitter:site\" content=\"@sanjaywebdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\"},\"author\":{\"name\":\"Sanjay Jain\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\"},\"headline\":\"How To a Create Sticky or Fixed Navbar\/Menu bar\",\"datePublished\":\"2017-11-06T09:51:24+00:00\",\"dateModified\":\"2017-11-06T09:56:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\"},\"wordCount\":817,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\",\"keywords\":[\"How To a Create Sticky or Fixed Navbar\/Menu bar\"],\"articleSection\":[\"Web Designing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\",\"name\":\"How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer\",\"isPartOf\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\",\"datePublished\":\"2017-11-06T09:51:24+00:00\",\"dateModified\":\"2017-11-06T09:56:50+00:00\",\"description\":\"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we'll walk you through a simple CSS technique for creating a fixed navigation bar.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg\",\"width\":1000,\"height\":600,\"caption\":\"How To a Create Sticky or Fixed Navbar\/Menu bar\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#website\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"name\":\"Sanjay Web Designer\",\"description\":\"Learn Web Designing &amp; Graphic Designing in Depth\",\"publisher\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization\",\"name\":\"Sanjay Web Designer\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"contentUrl\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png\",\"width\":240,\"height\":72,\"caption\":\"Sanjay Web Designer\"},\"image\":{\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sanjaywebdesigner\",\"https:\/\/x.com\/sanjaywebdesign\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41\",\"name\":\"Sanjay Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g\",\"caption\":\"Sanjay Jain\"},\"description\":\"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.\",\"sameAs\":[\"http:\/\/www.sanjaywebdesigner.com\",\"https:\/\/www.facebook.com\/sanjay73jain\",\"http:\/\/www.linkedin.com\/company\/sanjay-web-designer\",\"https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign\",\"https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw\",\"http:\/\/sanjaywebdesigner.tumblr.com\/\"],\"url\":\"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer","description":"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we'll walk you through a simple CSS technique for creating a fixed navigation bar.","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.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/","og_locale":"en_US","og_type":"article","og_title":"How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer","og_description":"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we'll walk you through a simple CSS technique for creating a fixed navigation bar.","og_url":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/","og_site_name":"Sanjay Web Designer","article_publisher":"https:\/\/www.facebook.com\/sanjaywebdesigner","article_author":"https:\/\/www.facebook.com\/sanjay73jain","article_published_time":"2017-11-06T09:51:24+00:00","article_modified_time":"2017-11-06T09:56:50+00:00","og_image":[{"width":1000,"height":600,"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg","type":"image\/jpeg"}],"author":"Sanjay Jain","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/sanjaywebdesign","twitter_site":"@sanjaywebdesign","twitter_misc":{"Written by":"Sanjay Jain","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#article","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/"},"author":{"name":"Sanjay Jain","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41"},"headline":"How To a Create Sticky or Fixed Navbar\/Menu bar","datePublished":"2017-11-06T09:51:24+00:00","dateModified":"2017-11-06T09:56:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/"},"wordCount":817,"commentCount":0,"publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg","keywords":["How To a Create Sticky or Fixed Navbar\/Menu bar"],"articleSection":["Web Designing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/","name":"How To a Create Sticky or Fixed Navbar\/Menu bar - Sanjay Web Designer","isPartOf":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg","datePublished":"2017-11-06T09:51:24+00:00","dateModified":"2017-11-06T09:56:50+00:00","description":"How To a Create Sticky or Fixed Navbar\/Menu bar, In this tutorial, we'll walk you through a simple CSS technique for creating a fixed navigation bar.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/create-sticky-fixed-navbarmenu-bar\/#primaryimage","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2017\/11\/How-To-a-Create-Sticky-or-Fixed-Menu-bar.jpg","width":1000,"height":600,"caption":"How To a Create Sticky or Fixed Navbar\/Menu bar"},{"@type":"WebSite","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#website","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","name":"Sanjay Web Designer","description":"Learn Web Designing &amp; Graphic Designing in Depth","publisher":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sanjaywebdesigner.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#organization","name":"Sanjay Web Designer","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","contentUrl":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-content\/uploads\/2021\/08\/cropped-footer-logo-1.png","width":240,"height":72,"caption":"Sanjay Web Designer"},"image":{"@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sanjaywebdesigner","https:\/\/x.com\/sanjaywebdesign"]},{"@type":"Person","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/7f15927dca46fba8128eebb678a0ae41","name":"Sanjay Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sanjaywebdesigner.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e80a626482bdb2e323343f4f015bc61d8655097da7dd1e684b2e2facb0b8c833?s=96&d=mm&r=g","caption":"Sanjay Jain"},"description":"I am a graphic and web designer in Delhi and Professional Web and Graphics Designer &amp; Animator. I provide SEO Service in Delhi along with SEO, Web and Graphics Designing Courses training with latest technique.","sameAs":["http:\/\/www.sanjaywebdesigner.com","https:\/\/www.facebook.com\/sanjay73jain","http:\/\/www.linkedin.com\/company\/sanjay-web-designer","https:\/\/x.com\/https:\/\/twitter.com\/sanjaywebdesign","https:\/\/www.youtube.com\/channel\/UCbBRE3GjyAhf1qd6nHg-vQw","http:\/\/sanjaywebdesigner.tumblr.com\/"],"url":"https:\/\/www.sanjaywebdesigner.com\/articles\/author\/sanjaywe\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/1717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/comments?post=1717"}],"version-history":[{"count":0,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/posts\/1717\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media\/1719"}],"wp:attachment":[{"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/media?parent=1717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/categories?post=1717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sanjaywebdesigner.com\/articles\/wp-json\/wp\/v2\/tags?post=1717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}