How to adjust Navbar height and add hover color to links?

Issue

When I try to adjust the height of my Navbar, the collapse button does not work properly (I’ve tried doing style="height: 60px;" and also something like .navbar {height: 60px;} but the collapse menu stops working). Also, the Navbar collapse button does not close the menu, it can only open it (it closes it, then glitches out and opens it back up). I also wanted to add a hover color to the "about" link and set an active color when in the section but couldn’t figure it out. Thanks

When I try to adjust the height of my Navbar, the collapse button does not work properly (I’ve tried doing style="height: 60px;" and also something like .navbar {height: 60px;} but the collapse menu stops working). Also, the Navbar collapse button does not close the menu, it can only open it (it closes it, then glitches out and opens it back up). I also wanted to add a hover color to the "about" link and set an active color when in the section but couldn’t figure it out. Thanks

Solution

You more than likely have an issue with your integration of either Bootstrap, JQuery, or Popper.js (or all three).

When I copied your code and added:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

in the <head> and then:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

as the LAST thing before the </body> tag, it worked. See this CodePen I set up:
https://codepen.io/jeffberlin/pen/ZEbPgvK

As for the hover, since you declared a color on the element, you can change it like this:

.nav-link:hover {
  color: red !important;
}

Answered By – Jeff Berlin

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.