css bootstrap4 skapa hamburger meny och lägga element som ligger utanför nav tag?

Permalänk

css bootstrap4 skapa hamburger meny och lägga element som ligger utanför nav tag?

Hej
Jag försöker att göra en hamburger-meny med bootstrap 4.

I W3Schools finns en exempel

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bo..."> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min..."></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/p..."></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/boo..."></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p> </div> </body>

Den kod lägger li item i hamburger-meny automatiskt när skärmen är små.
Jag vill lite ändra den kod. Jag har en andra nav tag som ligger utanför den första nav tag. Jag har prövat </nav> efter button tag och döpa nästa div tag med <nav>. Problem är jag ser hamburgare-meny med li item när skärmen är små men ser jag ingen <li> text när skärmen är stor. Hur kan man fixa det?

Permalänk
Medlem

Tror det blir lättare att se vart problemet ligger om du visar din HTML+CSS

Visa signatur

Grubblare