CODEWITHSUNDEEP
htmlcssbootstrap-5
Wadu Hek
Wadu Hek

Reputation: 33

Bootstrap Hamburger Icon not aligning with Navbar-Brand

I'm trying to create a website using bootstrap and while using the navbar component, I'm facing an issue where in when the screen shrinks to the breakpoint I've set (which is lg) the hamburger icon's alignment gets disrupted as seen below.

Can someone please let me know why this is happening and what is the best way to fix this issue? Thanks in advance

<html>

<head>
  <title>Johns's Portfolio</title>
  <!-- Linking custom CSS file -->
  <link rel="stylesheet" href="./index.css">
  <!-- Linking Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <span class="navbar-brand fw-bold">John Doe</span>
    </div>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="navbar-collapse collapse" id="ToggleMenu">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Work</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Projects</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Education</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Testimonials</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Bootstrap Javascript files-->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

I'm also attaching a picture of the issue: screenshot of error

Upvotes: 0

Views: 382

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

Your problem is you put your button outside of container

<div class="container">
      <span class="navbar-brand fw-bold">John Doe</span>
    </div>
    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

It needs to be like this

<div class="container">
      <span class="navbar-brand fw-bold">John Doe</span>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    </div>

You can try this fix

<html>

<head>
  <title>Johns's Portfolio</title>
  <!-- Linking custom CSS file -->
  <link rel="stylesheet" href="./index.css">
  <!-- Linking Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
    <div class="container">
      <span class="navbar-brand fw-bold">John Doe</span>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Work</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Projects</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Education</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Testimonials</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Bootstrap Javascript files-->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 2

Related Questions