CODEWITHSUNDEEP
cssbootstrap-4nav
user8142888
user8142888

Reputation:

Bootstrap 4: Navbar Nav Items Underline

Here is the code from Get Bootstrap Examples for fixed navbar 4.1 but have installed from nuget is Bootstrap 4.5 and JQuery 3.5.1:

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

  </div>
</nav>

I am attempting to underline items (border-bottom: 1px solid #555 with 15px padding on the left) when the navbar is collapsed and shown (vertical) but not when the navbar is expanded horizontally.

To me, there is also another issue and that is when the navbar is collapsed and the menu is displayed, resizing the navbar to expanded (horizontal menu items). the nav-item border-bottom: 1px solid #555 is still in place. If I add a margin-top between the brand-name and first nav-item, have the navbar collapsed with the menu displayed then change to an expanded navbar, the padding / margin I set between the brand name and the top of all the menu items.

Also, if I add the padding between the brand-name and first vertical menu item it opens / closes in a choppy way, so I will need to find a way to stop this choppy behaviour. All I have found so far is to remove the padding.

Appreciate any help.

Update:

Really sorry as I missed the choppy part out. I am using shrink as per this page and transitioning between the shrunk navbar to the normal. The navbar seemed to be smoothish but the logo wasnt. This is all I needed to do to solve that:

.navbar-brand { transition: all, 0.5s ease; }
.shrink .navbar-brand { transition: all, 0.5s ease; }
.navbar-brand img { transition: all, 0.5s ease; }
.shrink .navbar-brand img { transition: all, 0.5s ease; }

I have created a SASS Mixin to deal with the transitions throughout the project which adds the transition for webkit, moz and o as well as the normal transition. It is similar to this one (see transitions).

You idea was brilliant and I never even thought of media queries. The idea you had with the navbar-brand was no good but this is what I did with your idea to make things work:

@media screen and (max-width: 991.88px) {
.navbar-nav .nav-link {
    padding-left: 15px
}

.navbar-nav .nav-item {
    border-bottom: 1px solid #555;
}

.shrink .navbar-nav {
    margin-top: 10px;
}

.shrink .navbar-nav .nav-link {
    margin: 8px 0;
    padding-bottom: 11px;
}

}

Really appreciate your time with this and as soon as this site allows me, I will mark your reply as the solution. Thank you so much!!

Upvotes: 0

Views: 1628

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

A few things:

  • add media query if you only need it in vertical (burger menu)
  • don't add margin-top to the first item, instead, add margin-bottom to the brand
  • choppy behavior is not visible in my code

snippet below:

@media screen and (max-width:991px) {
  .navbar-nav .nav-link {
    border-bottom: 1px solid #555;
    padding-left: 15px
  }
  .navbar-brand {
    margin-bottom: 30px
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>


  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>

      </div>
    </nav>

  </div>

Upvotes: 0

Related Questions