Adjusting Border Width to Match Text Above
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 utilize the box-shadow property on this span.
Implementation on Your Website
Update: The code for the dropdown menu has been added.
I have created a Minimal, Complete, and Verifiable example based on your site. To resolve your issue, wrap the text of each link into <span></span> and apply the following CSS:
.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;
}
}
Check the result here: 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;
}
/* More styles... */
},
});
Enhancing Bootstrap Navbar Design
To style your Bootstrap navbar with consistent border widths matching text, I've utilized the span:first-child selector to account for links containing
<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;
}
/* Additional styling... */
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
// More navigation elements...
</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>