{"id":23705,"date":"2022-11-27T23:04:30","date_gmt":"2022-11-27T17:34:30","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/"},"modified":"2022-11-27T23:04:30","modified_gmt":"2022-11-27T17:34:30","slug":"solved-bootstrap-navbar-issues","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/","title":{"rendered":"[Solved] Bootstrap navbar issues"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-48183353\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"48183353\" data-parentid=\"48180359\" 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>This issue is happening because of you are using both the latest bootstrap beta version (v4.0.0-beta.3) and earlier bootstrap version (v3.3.7). I believe you have used both the following cdn path.<\/p>\n<pre><code> https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css\n https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\n<\/code><\/pre>\n<p>If you use the above one, you will end up with the result as you showed in the image. Same you can verify in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/hdze4dsm\/1\/\"><strong>FIDDLE DEMO<\/strong><\/a>.<\/p>\n<p>The solution is to use the version(v3.3.7) only in your code and you can get the same look and feel as they have showed in bootstrap site. Same you can check in this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jsfiddle.net\/zy1Lja80\/\"><strong>FIDDLE DEMO<\/strong><\/a> <\/p>\n<p><strong>NOTE:<\/strong> Whenever you post some question in StackOverflow, add minimal running code of your problem, so that people will easily understand your problem and help you to resolved the issue. Only IMAGE won&#8217;t work for all the time.      <\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">3<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Bootstrap navbar issues <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] This issue is happening because of you are using both the latest bootstrap beta version (v4.0.0-beta.3) and earlier bootstrap version (v3.3.7). I believe you have used both the following cdn path. https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css If you use the above one, you will end up with the result as you showed in the image. Same you &#8230; <a title=\"[Solved] Bootstrap navbar issues\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\" aria-label=\"More on [Solved] Bootstrap navbar issues\">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":[464,346,1102],"class_list":["post-23705","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-twitter-bootstrap-3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Bootstrap navbar issues - 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-issues\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Bootstrap navbar issues - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] This issue is happening because of you are using both the latest bootstrap beta version (v4.0.0-beta.3) and earlier bootstrap version (v3.3.7). I believe you have used both the following cdn path. https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css If you use the above one, you will end up with the result as you showed in the image. Same you ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-27T17:34:30+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=\"1 minute\" \/>\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-issues\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Bootstrap navbar issues\",\"datePublished\":\"2022-11-27T17:34:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\"},\"wordCount\":144,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"twitter-bootstrap-3\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\",\"name\":\"[Solved] Bootstrap navbar issues - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-27T17:34:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Bootstrap navbar issues\"}]},{\"@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=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"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 issues - 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-issues\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Bootstrap navbar issues - JassWeb","og_description":"[ad_1] This issue is happening because of you are using both the latest bootstrap beta version (v4.0.0-beta.3) and earlier bootstrap version (v3.3.7). I believe you have used both the following cdn path. https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css If you use the above one, you will end up with the result as you showed in the image. Same you ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/","og_site_name":"JassWeb","article_published_time":"2022-11-27T17:34:30+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Bootstrap navbar issues","datePublished":"2022-11-27T17:34:30+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/"},"wordCount":144,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","twitter-bootstrap-3"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/","url":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/","name":"[Solved] Bootstrap navbar issues - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-27T17:34:30+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-bootstrap-navbar-issues\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Bootstrap navbar issues"}]},{"@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=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","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\/23705","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=23705"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23705\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=23705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=23705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=23705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}