The .navbar-toggler-icon does not appear
Question
<header class="container"> <div class="container pt-3 col-md-5 col-sm-5 col-xs-6 text-center"> <a href="#" class="site-logo"><img src="#"></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> <nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center"> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#">artwork</a> </li> </ul> </div> </nav> </header>
The .navbar-toggler-icon does not appear on the .navbar-toggler button when the menu is collapsed for mobile responsiveness.
I want the Navbar button above the left
1 answers
solution1
-1 2019-01-30 12:56:06
Use this body code only...... for your bootstrap.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <!--Main Navigation--> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-6 col-lg-7 col-md-9 container text-center"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <a href="#" class="site-logo navbar-brand""><img src="#"></a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">work</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> <li class="nav-item"> <a class="nav-link" href="#">contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#">artwork</a> </li> </ul> </div> </nav> </header> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap 4 navbar-toggler-icon does not appear
Navbar toggler not expanding (Bootstrap 5)
Navbar toggler not showing the list items
Bootstrap + React: navbar toggler not working
Bootstrap 3 Navbar toggle - collapses but button does not appear
Why does my navbar appear on top of scrollbar?
Bootstrap 4 Beta 2 navbar-toggler not Working
why Navbar toggler is not working on vanilla js and css
My navbar toggler arrow not working properly
Bootstrap navbar lag when closing toggler
Related Tags