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

1 Views

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:

<div class="collapse navbar-collapse navbar-ex1-collapse">
   <ul id="menu-main-menu" class="nav navbar-nav">
     <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-32 active">
     <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
     <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
     <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
     <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26 dropdown">
     <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
     <li id="menu-item-498" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-498">
     <li id="menu-item-499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-499">
</ul>
</div>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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 <span></span> 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 <span></span> 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;
  }
}
    <nav class="navbar-fixed-top navbar" role="navigation">

  <ul id="menu-main-menu" class="nav navbar-nav">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-32 active"><a href="#"><span>Link</span></a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#"><span>Link</span></a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="#"><span>Link</span></a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#"><span>Link</span></a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26 dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Dropdown</span></a>
      <ul role="menu" class="dropdown-menu">
        <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#"><span>Link</span></a></li>
      </ul>
    </li>
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#"><span>Link</span></a></li>
    <li id="menu-item-498" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-498"><a title="facebook" target="_blank" href="#"><i class="fa fa-facebook fa-fw"></i></a></li>
    <li id="menu-item-499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-499"><a title="twitter" target="_blank" href="#"><i class="fa fa-twitter fa-fw"></i></a></li>  
  </ul>

</nav>

    For Bootstrap navbar

    screenshot

    I’ve used the span:first-child selector because some links may contain <span class="sr-only"></span>.

    @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;
  }
}
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span>Brand</span></a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span>Link</span><span class="sr-only">(current)</span></a></li>
        <li><a href="#"><span>Link</span></a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span>Link</span></a></li>
        <li><a href="#"><span>Link</span></a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>