How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
Question
I'm trying to make the hamburger menu show below the icon in row like it is, but the menu and icon are jumping when clicked. How can I prevent that from happening? I've tried adjusting getting rid of fixed heights and it didn't change. I want everything to stay in place with the collapsed menu just appearing below it. Here's my code:
*, ::before, ::after { box-sizing: border-box; } :root { --blue: #3a2eb6; --white: #fff; --red: #cd3f33; } html{ font-size: 1em; } nav{ background: var(--white); } nav .logo{ background: url("../images/logo-mobile.jpg") no-repeat 0 0/contain transparent; display: block; overflow: hidden; width: 13.6875rem; height: 2.875rem; } nav ul li a{ color: var(--blue); } nav ul li{ margin: 0 0.25rem; } nav div.sign-in{ display: none; margin: 0 0.25rem; } button.navbar-toggler span i.menu-toggler{ color: var(--red); } @media screen and (min-width: 768px) { nav .logo{ width: 17.125rem; height: 3.5625rem; } nav ul li.sign-in-mobile a{ display: none; } nav div.sign-in{ background-color: var(--blue); padding: 0 1.5rem; display: block; margin-left: 15rem; } nav div.sign-in a{ color: var(--white); } #bootstrap-override .navbar-nav{ flex-direction: row; justify-content: flex-end; border-bottom: .1rem solid var(--red); } } @media screen and (min-width: 992px) { #bootstrap-override .navbar-expand-lg .navbar-toggler{ display: none; } nav .logo{ width: 24.625rem; height: 5.25rem; } #bootstrap-override .navbar-nav{ border: none; margin-left: 2rem; } nav div.sign-in{ order: 1; margin: 0 0.25rem; white-space: nowrap; } } */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="description: goes here" name="description"> <meta content="HTML, CSS, XML, JavaScript" name="keywords"> <meta content="Twisted Yogurt" name="author"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Home</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body id="bootstrap-override"> <header> <nav class="navbar navbar-expand-lg"> <div class="container justify-content-space-between"> <a class="navbar-brand" href="index.html"> <div class="logo"></div></a> <div class="sign-in"> <a class="nav-link" href="#">Sign In</a> </div><button aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler d-lg-none" data-target="#myTogglerNav" data-toggle="collapse" type="button"><span><i class="fa fa-bars menu-toggler"></i></span></button> <div class="collapse navbar-collapse" id="myTogglerNav"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Menu</a> <ul aria-labelledby="nav-link" class="dropdown-menu"> <li> <a href="#">Froyo</a> </li> <li> <a href="#">Smoothies</a> </li> <li> <a href="#">Boba</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Build</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Community Recipes</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 sign-in-mobile"> <a class="nav-link" href="#">Sign In</a> </li> </ul> </div> </div> </nav> </header> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"> </script> </body> </html>
1 answers
solution1
0 2020-10-28 17:27:33
You've got some errors in your HTML code ( <div> directly inside of <ul> ). Make sure the code is valid and well indented to keep it readable and structured.
Anyways take a look at the documentation: https://getbootstrap.com/docs/4.5/components/navbar/ You've got to put div#myTogglerNav outside of / around ul.nav.navbar-nav and then move button.navbar-toggler above it.
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
How to change hamburger menu icon when clicked?
How to stop mobile menu from jumping when clicked?
How do I stop my hamburger icon from staying with top bar so it appears with the side menu?
How to stop my Hamburger menu from jumping me to the top of my page on click.
How to define collapsible hamburger menu in Bootstrap 3?
How to push menu content down when hamburger icon is clicked?
Bootstrap hamburger menu not applying background when clicked
How can I make my hamburger menu button change colors once clicked?
How do I make my hamburger menu appear directly under my hamburger icon?
How can I position my hamburger menu and its drop down on the right side at the same time with bootstrap?
Related Tags