Add bottom border to hover/focus/active bootstrap wordpress navigation menu item

Question

I would like to add a border bottom to my menu navigation button that is hovered over, or selected, or the current menu item. I dont' just want to add a "text-decoration:underline", I would like to have a 3px tall border and only have it the width of the nav item above it, I can't find an example that applies - any help is greatly appreciated:

I am using wordpress dynamic menu:

Gleb Kemarsky · Accepted Answer

How to make the width of the border equal to the width of the text above it

You can wrap the text of each link into and apply the box-shadow property to this span.

On your website

screenshot

UPD. I've added the code for the dropdown menu.

I've made a Minimal, Complete, and Verifiable example based on your site. You have to wrap the text of each link into and add this CSS to solve your issue:

.dropdown-toggle {
  margin-top: 0;
}
#menu-main-menu .current-menu-item a,
.nav > li > a:focus,
.nav > li > a:hover {
  box-shadow: none;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding: 0 10px;
  }
  .navbar-nav > li > a > .fa-fw {
    width: auto;
  }
  .navbar-nav > li > a > .fa-fw,
  .navbar-nav > li > a > span {
    display: inline-block;
    padding: 15px 0;
  }
  .navbar-nav > li > a:hover > span,
  .navbar-nav > li > a:focus > span,
  .navbar-nav > .active > a  > span {
    box-shadow: inset 0px -3px 0px #f2ab00;
  }
}

Please check the result: https://jsfiddle.net/glebkema/jacL6zme/

/******** MINIMAL, COMPLETE AND VERIFIABLE EXAMPLE ********/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,500,600,700');

body {
  background-color: #3b3e4d;
  color: #fff;
  font-family: "Poppins",sans-serif;
  font-size: 16px;
}

/* fragment of your bootstrap.min.css */
a {
  background-color:transparent !important;
}
#menu-main-menu .current-menu-item a {
  color: #f2ab00;
  box-shadow: inset 0px -3px 0px #f2ab00;
  display: inline-block;
}
.navbar-fixed-top {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}
.navbar-nav>li>a {
  line-height: 20px;
}
.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #fff;
}
.nav>li>a:focus, .nav>li>a:hover {
  text-decoration: none;
  color: #f2ab00;
  box-shadow: inset 0px -3px 0px #f2ab00;
  display: inline-block;
}

/* fragment of your style.css */
a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.fa {
  font: 28px/1 FontAwesome;
}
.navbar-nav > li > a {
  font-size:12px;
  font-weight:500;
  font-style: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  letter-spacing: 1px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}
.nav.navbar-nav {
  float: right;
}
.nav>li>a {
  text-transform: uppercase;
}
#menu-item-498 a, #menu-item-499 a {
  color: #f2ab00;
  font-family: FontAwesome;
  margin-top: -5px;
}
#menu-item-498 a:hover, #menu-item-499 a:hover {
  color: #fff;
}
@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}
.navbar-nav > li > .dropdown-menu {
  padding: 0;
}
.dropdown-menu, 
.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus {
    border: none;
    color: #f2ab00;
    font-weight: 600;
}
.dropdown-menu {
    font-size: 12px;
    letter-spacing: 1px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #f2ab00;
  background-color: #252839;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
    color: #f2ab00;
    background-color: #252839;
  }
}
.dropdown-toggle {
    margin-top: 15px;
}

/* fragment of your font-awesome/css/font-awesome.min.css */
.fa-fw {
  width: .028571429em;
  text-align: center;
}

/* fragment of your page's styles */
.navbar-default .navbar-nav .open .dropdown-menu > li > a, 
.dropdown-menu > li > a {
    color: #ffffff;
}
.dropdown-menu {
    background-color: #252839;
}
.dropdown-menu > li > a {
    padding: 10px 15px;
    color: #fff;
    text-transform: uppercase;
}

/********** THE HEART OF THE MATTER **********/
.dropdown-toggle {
  margin-top: 0;
}
#menu-main-menu .current-menu-item a,
.nav > li > a:focus,
.nav > li > a:hover {
  box-shadow: none;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding: 0 10px;
  }
  .navbar-nav > li > a > .fa-fw {
    width: auto;
  }
  .navbar-nav > li > a > .fa-fw,
  .navbar-nav > li > a > span {
    display: inline-block;
    padding: 15px 0;
  }
  .navbar-nav > li > a:hover > span,
  .navbar-nav > li > a:focus > span,
  .navbar-nav > .active > a  > span {
    box-shadow: inset 0px -3px 0px #f2ab00;
  }
}



  
    Link
    Link
    Link
    Link
    Dropdown
      
        Link
      
    
    Link

For Bootstrap navbar

screenshot

I've used the span:first-child selector because some links may contain .

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background: #9d9d9d;
}
.navbar-nav > li > a {
  color: #fff !important;
  font-transform: uppercase;
  font-weight: bold;
}
.navbar-nav > li > a:hover > span:first-child,
.navbar-nav > li > a:focus > span:first-child,
.navbar-nav > .active > a  > span:first-child {
  color: #f2ab00 !important;
}

@media (min-width: 768px) {
  .navbar {
    border: none;
  }
  .navbar-nav > li > a {
    padding: 0 15px;
  }
  .navbar-nav > li > a > span:first-child {
    display: inline-block;
    padding: 15px 0;
  }
  .navbar-nav > li > a:hover > span:first-child,
  .navbar-nav > li > a:focus > span:first-child,
  .navbar-nav > .active > a  > span:first-child {
    box-shadow: inset 0px -3px 0px #f2ab00;
  }
}


  
    
      
      Brand
    

    
      
        Link(current)
        Link
      
      
        Link
        Link

Add bottom border to hover/focus/active bootstrap wordpress navigation menu item

Answers (1)

How to make the width of the border equal to the width of the text above it

On your website

For Bootstrap navbar

Related Questions