1

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>
aynber
  • 22,380
  • 8
  • 50
  • 63
webdev99
  • 11
  • 3

1 Answers1

0

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.

j0ste
  • 379
  • 1
  • 7