Hello, I've developed a simple website with a bootstrap navbar, which is collapsible on mobile devices. I tried everything, but as of now the navbar toggle icon doesn't show up on mobile devices. You can still click the rectangle in top right corner and then the collapsible menu shows up, but I think that most of the users may not know of that. My website is here - http:// sylviadieta.pl/ html: <nav class="navbar navbar-expand-lg navbar-default navbar-default-edit fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="img/logo2.png" width="136" height="60" alt="logo"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <!-- <li class="nav-item active"> <a class="nav-link" href="#"><b>Strona Główna</b> <span class="sr-only">(current)</span> </a> </li> --> <li class="nav-item"> <a class="nav-link" href="#stronaglowna"><b>Strona Główna</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#omnie"><b>O Mnie</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#cennik"><b>Cennik</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#wizyta"><b>Wizyta</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#certyfikaty"><b>Certyfikaty</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#edieta"><b>E-dieta</b></a> </li> <li class="nav-item"> <a class="nav-link" href="#kontakt"><b>Kontakt</b></a> </li> </ul> </div> </div> </nav> Code (markup): CSS: @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900); .navbar { background-color: #0ac530; } .navbar .navbar-brand { font-size: 1.5em; color: #000000; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { font-size: 1.5em; color: #000000; } .navbar .navbar-text { font-size: 1.5em; color: #000000; } .navbar .navbar-nav .nav-link { font-size: 1.5em; color: #000000; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #000000; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { color: #000000; background-color: #11cc05; } .navbar .navbar-toggle { border-color: #11cc05; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #11cc05; } .navbar .navbar-toggle .navbar-toggler-icon { color: #000000; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #000000; } .navbar .navbar-link { color: #000000; } .navbar .navbar-link:hover { color: #000000; } [USER=124521]@media[/USER] (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #000000; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #000000; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #000000; background-color: #11cc05; } } [USER=124521]@media[/USER] (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #000000; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #000000; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #000000; background-color: #11cc05; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #000000; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #000000; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #000000; background-color: #11cc05; } } [USER=124521]@media[/USER] (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #000000; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #000000; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #000000; background-color: #11cc05; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #000000; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #000000; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #000000; background-color: #11cc05; Code (markup): Thank you
Looking at your code you are missing: <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> HTML: Inside: <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> Code (markup):
So it should be something like: <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> HTML: I tried that and it is not working.
Sorry looks like you are using Bootstrap 4.0 not 3.x Try this if this works then just change it to fit your needs. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> Code (markup):
Ah, such a lovely example of what incompetent nonsense bootcrap is. Really the whole menu is what with the scripting doing CSS' job, endless pointless classes for nothing, etc, etc, etc.... Nothing like 2.3k of markup to do half a K's job. Sure that made developing the page so much "easier". Hell the selectors ALONE just to apply custom colours is bigger than the CSS needed to write the menu without bootcrap! Go find a stick to scrape that off with.