CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user3384674
user3384674

Reputation: 837

Bootstrap 4 collapse problem with custom height navbar

I am using a navbar with brand logo image (150px x 33px) in Bootstrap 4.

I need to increase the height of the navbar to 80px. I use min-height: 80px; to achieve this.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title</title>
  <link href="../system/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

  <style>
    .navbar {
      min-height: 80px;
      background-color: #FFFFFF;
      border-bottom-color: #D8D8DD;
      border-bottom-style: solid;
      border-bottom-width: 1px;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg fixed-top navbar-light">

    <a class="navbar-brand" href="#"><img src="logo-placeholder-150px-33px.png" ></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation01">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navigation01">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active " href="#">Item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
      </ul>
    </div>
  </nav>

<script src="../system/jquery/dist/jquery.js"></script>
<script src="../system/popper.js/dist/popper.js"></script>
<script src="../system/bootstrap/dist/js/bootstrap.js"></script>

</body>
</html>

On smaller viewports the menu is correctly collapsed and the hamburger icon becomes visible.

However when I open the menu by clicking on the hamburger icon the Y-position of the logo and the hamburger icon changes. They move slightly towards the top.

enter image description here

How to solve this problem?

Upvotes: 2

Views: 1215

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362630

You want to change navbar-brand min-height instead, and remove the padding (py-0) from the navbar to get the exact min-height of 80px...

<nav class="navbar navbar-expand-lg fixed-top navbar-light py-0">
    <a class="navbar-brand align-items-center d-flex" href="#"><img src="//placehold.it/150x33"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation01">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navigation01">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link active " href="#">Item 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
        </ul>
    </div>
</nav>

Demo

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Use padding to give height to your navbar instead of min-height. it will solve your problem. increase padding of navbar class.

.navbar {
    padding: .6rem 1rem;
    background-color: #FFFFFF;
    border-bottom-color: #D8D8DD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

Upvotes: 3

Related Questions