how to add hover effects to bootstrap navigation menu

Question

Hi guys i am new to web development and i am trying to add a hover effect to my nav menu , something like the first example in this link : https://codepen.io/Calloumi/pen/vndlH

I tried to implement the same idea to my bootstrap html nav menu , however mine behaves slightly in different way, only the bottom border seems to move inwards and when i hover over the Links and hovering over them also moves my menu item up. i am not sure what need to add/ change to make it work the same way

 .navbar-light .navbar-nav .nav-link { text-transform: uppercase; text-align: center; font-size: 13px; text-decoration: none; background: white; color: black; font-family: "open-sans"; transition: 0.3s ease; border-top: 4px solid #FFFFFF; border-bottom: 4px solid #FFFFFF; padding: 20px 0; margin: 0 20px; } .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover { border-top: 4px solid #000000; border-bottom: 4px solid #000000; padding: 6px 0px; background: #11ADE8; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-expand-md navbar-light "> <div class="container-fluid"> <a class="navbar-brand " href="#"> <img src="images/logoblue.png" alt=""> </a> <button class="navbar-toggler first-button darken-3" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <div class="animated-icon1"><span></span><span></span><span></span></div> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-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="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Booking</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Prices</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact us</a> </li> </ul> </nav> 

Any help is much appreciated towards achieving the same hover effect to my navigation menu.

Answer 1

You have an insane amount of HTML for a simple navigation. The codepen you linked does it correctly. A set of links (ie anchor tags) wrapped in a nav element.

The correct solution here is to simplify your HTML.

 nav { margin-top: 40px; padding: 24px; text-align: center; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); background: #3fa46a; } nav a { transition: 0.3s ease; background: #3fa46a; color: white; font-size: 20px; text-decoration: none; border-top: 4px solid transparent; border-bottom: 4px solid transparent; padding: 20px 0; margin: 0 5px; font-size: 17px; } nav a:hover { border-top: 4px solid white; border-bottom: 4px solid white; padding: 6px 0; } 

 <nav> <a href="#">Home <span class="sr-only">(current)</span></a> <a href="#">Services</a> <a href="#">Products</a> <a href="#">Booking</a> <a href="#">Prices</a> <a href="#">Gallery</a> <a href="#">Contact us</a> </nav> 

Answer 2

EDIT: you need to remove the .navbar-light class from the :hover styling and use display:inline for the navbar-nav it will work as intended. Below is corrected code from your codepen in the comments.

 .navbar-light .navbar-nav .nav-link {
    display: inline;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    color: black;
    font-family:"open-sans";
    transition: 0.3s ease;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin: 0 20px;
    padding: 20px 0;

}

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link:hover {
    border-top: 4px solid #000000;
    border-bottom: 4px solid #000000;
    background:#11ADE8;
    padding: 6px 0;
}