{"id":20723,"date":"2022-11-10T17:19:04","date_gmt":"2022-11-10T11:49:04","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/"},"modified":"2022-11-10T17:19:04","modified_gmt":"2022-11-10T11:49:04","slug":"solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/","title":{"rendered":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-60910232\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"60910232\" data-parentid=\"60910053\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You can use fixed-top<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;fish&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"&gt;\r\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js\" integrity=\"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.0\/dist\/umd\/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n    &lt;header&gt;\r\n        &lt;img&gt;\r\n        &lt;nav class=\"navbar fixed-top navbar-expand-lg navbar-light bg-light\"&gt;\r\n            &lt;a class=\"navbar-brand\" href=\"#\"&gt;&lt;\/a&gt;\r\n            &lt;button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNavDropdown\" aria-controls=\"navbarNavDropdown\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt;\r\n                &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\r\n            &lt;\/button&gt;\r\n            &lt;div class=\"collapse navbar-collapse\" id=\"navbarNavDropdown\"&gt;\r\n                &lt;ul class=\"navbar-nav justify-content-end\"&gt;\r\n                    &lt;li class=\"nav-item active\"&gt;\r\n                        &lt;a class=\"nav-link\" href=\"#\"&gt;CLOSING COSTS &lt;span class=\"sr-only\"&gt;(current)&lt;\/span&gt;&lt;\/a&gt;\r\n                    &lt;\/li&gt;\r\n                    &lt;li class=\"nav-item dropdown\"&gt;\r\n                        &lt;a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdownMenuLink\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"&gt;\r\n                            REALTOR RESOURCES\r\n                        &lt;\/a&gt;\r\n                        &lt;div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdownMenuLink\"&gt;\r\n                            &lt;a class=\"dropdown-item\" href=\"#\"&gt;Live Transactional Support&lt;\/a&gt;\r\n                            &lt;a class=\"dropdown-item\" href=\"#\"&gt;Title Talk&lt;\/a&gt;\r\n                            &lt;a class=\"dropdown-item\" href=\"#\"&gt;Tutorials&lt;\/a&gt;\r\n                            &lt;a class=\"dropdown-item\" href=\"#\"&gt;Blog&lt;\/a&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/li&gt;\r\n                    &lt;li class=\"nav-item\"&gt;\r\n                        &lt;a class=\"nav-link\" href=\"#\"&gt;CONTACT&lt;\/a&gt;\r\n                    &lt;\/li&gt;\r\n                &lt;\/ul&gt;\r\n                &lt;a href=\"#\" class=\"btn btn-primary btn-lg active\" role=\"button\" aria-pressed=\"true\"&gt;SUBMIT CONTRACT&lt;\/a&gt;\r\n                &lt;a href=\"#\" class=\"btn btn-secondary btn-lg active\" role=\"button\" aria-pressed=\"true\"&gt;SIGN IN&lt;\/a&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/nav&gt;\r\n    &lt;\/header&gt;\r\n    &lt;main&gt;\r\n        &lt;div&gt;\r\n\r\n        &lt;\/div&gt;\r\n        &lt;p&gt;\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident cumque distinctio, nulla beatae deserunt iusto saepe quae. Quas fugiat vero voluptatem, fuga, nostrum quibusdam labore ipsam voluptates dolores velit.   \r\n        &lt;\/p&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur consequatur veritatis accusamus blanditiis labore aspernatur quam! Repellendus delectus sint dolorem maxime natus, rem dolorum similique consectetur deserunt facilis explicabo.    \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ut, assumenda? Molestiae quidem eum ratione provident consequatur non quibusdam nesciunt nam aperiam numquam suscipit error optio, minus, doloribus quaerat exercitationem!    \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quaerat velit a adipisci id, sunt harum asperiores sit beatae pariatur rerum voluptatem ducimus libero ex. Tenetur voluptatum molestiae, possimus atque!   \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi voluptatibus omnis adipisci, minus neque cum nesciunt itaque voluptate deserunt harum? Aliquam totam nemo, a explicabo tenetur, repudiandae vero voluptatem! \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero perspiciatis laboriosam impedit, aliquid at temporibus aperiam voluptatum earum. Veniam natus quibusdam illo excepturi totam aliquam ratione ex fugiat, molestiae ipsam.  \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eveniet sed minus. Veniam voluptatum aut, reprehenderit exercitationem sequi nesciunt, error, ex aliquid numquam saepe hic asperiores quam dolorem, aspernatur inventore?   \r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div&gt;\r\n  &lt;p&gt;\r\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, necessitatibus sunt eius placeat, suscipit velit cumque distinctio eum quibusdam qui libero eos optio labore dolor beatae illum ipsa fugiat ratione. \r\n\r\n        &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/main&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;footer&gt;\r\n\r\n&lt;\/footer&gt;\r\n\r\n&lt;\/html&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<p>You can also look into it <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_navbar_sticky\">https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_navbar_sticky<\/a><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">0<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Bootstrap navbar will not function as a sticky navbar, how do i make it work <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You can use fixed-top &lt;html&gt; &lt;head&gt; &lt;meta charset=&#8221;UTF-8&#8243;&gt; &lt;title&gt;fish&lt;\/title&gt; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css&#8221; integrity=&#8221;sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&#8221; crossorigin=&#8221;anonymous&#8221;&gt; &lt;script src=&#8221;https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js&#8221; integrity=&#8221;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&#8221; crossorigin=&#8221;anonymous&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.0\/dist\/umd\/popper.min.js&#8221; integrity=&#8221;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&#8221; crossorigin=&#8221;anonymous&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js&#8221; integrity=&#8221;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&#8243; crossorigin=&#8221;anonymous&#8221;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; &lt;header&gt; &lt;img&gt; &lt;nav class=&#8221;navbar fixed-top navbar-expand-lg navbar-light bg-light&#8221;&gt; &lt;a class=&#8221;navbar-brand&#8221; href=&#8221;#&#8221;&gt;&lt;\/a&gt; &lt;button class=&#8221;navbar-toggler&#8221; type=&#8221;button&#8221; data-toggle=&#8221;collapse&#8221; data-target=&#8221;#navbarNavDropdown&#8221; aria-controls=&#8221;navbarNavDropdown&#8221; aria-expanded=&#8221;false&#8221; aria-label=&#8221;Toggle navigation&#8221;&gt; &lt;span class=&#8221;navbar-toggler-icon&#8221;&gt;&lt;\/span&gt; &lt;\/button&gt; &lt;div class=&#8221;collapse navbar-collapse&#8221; &#8230; <a title=\"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\" aria-label=\"More on [Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346],"class_list":["post-20723","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can use fixed-top &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;fish&lt;\/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt; &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt; &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.0\/dist\/umd\/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt; &lt;script src=&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; &lt;header&gt; &lt;img&gt; &lt;nav class=&quot;navbar fixed-top navbar-expand-lg navbar-light bg-light&quot;&gt; &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;&lt;\/a&gt; &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNavDropdown&quot; aria-controls=&quot;navbarNavDropdown&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt; &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;\/span&gt; &lt;\/button&gt; &lt;div class=&quot;collapse navbar-collapse&quot; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-10T11:49:04+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work\",\"datePublished\":\"2022-11-10T11:49:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\"},\"wordCount\":57,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\",\"name\":\"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-10T11:49:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb","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:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb","og_description":"[ad_1] You can use fixed-top &lt;html&gt; &lt;head&gt; &lt;meta charset=\"UTF-8\"&gt; &lt;title&gt;fish&lt;\/title&gt; &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css\" integrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T\/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\" crossorigin=\"anonymous\"&gt; &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js\" integrity=\"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt; &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/popper.js@1.16.0\/dist\/umd\/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt; &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/js\/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt; &lt;header&gt; &lt;img&gt; &lt;nav class=\"navbar fixed-top navbar-expand-lg navbar-light bg-light\"&gt; &lt;a class=\"navbar-brand\" href=\"#\"&gt;&lt;\/a&gt; &lt;button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNavDropdown\" aria-controls=\"navbarNavDropdown\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt; &lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt; &lt;\/button&gt; &lt;div class=\"collapse navbar-collapse\" ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/","og_site_name":"JassWeb","article_published_time":"2022-11-10T11:49:04+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work","datePublished":"2022-11-10T11:49:04+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/"},"wordCount":57,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/","url":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/","name":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-10T11:49:04+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-will-not-function-as-a-sticky-navbar-how-do-i-make-it-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Bootstrap navbar will not function as a sticky navbar, how do i make it work"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=20723"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20723\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}