To best illustrate my issue, I will begin with a screenshot of the problem and then explain what I aim to achieve. Here is the current state of my navbar:
Currently, the text of the links on the right side is positioned at the top. Additionally, this is how my hover effect looks:
There are two specific changes I would like to make:
- Adjust the height of the
<li>elements within the navbar's<ul>so that they span the entire height of the navbar, enabling the hover effect to cover the full height rather than just small boxes. - Centrally align the link text within these elements.
Given my limited CSS expertise and the multiple CSS classes involved in the navbar styling, I am uncertain where to begin.
The current code for my navbar is as follows:
<nav id="k9nav-outer" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#k9nav-inner">
<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="#"><img src="images/k9logo.png" alt="K9SportsCenter" class="img-responsive" /></a>
</div>
<div class="collapse navbar-collapse" id="k9nav-inner">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Services</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</nav>
My custom CSS currently includes:
#k9nav-outer {
background-color: #428bca;
}
#k9nav-inner ul li:hover {
background-color: black;
}
#k9nav-inner ul li:hover a {
box-shadow: 0 -2px red inset;
}
#k9nav-inner ol li:active {
background-color: black;
}
#k9nav-outer .navbar-brand,
#k9nav-inner .navbar-nav > li > a {
color: #fff;
}
In Chrome's developer tools, it appears that the <li> elements have a height of 50px, though no such height specification exists. Should I implement:
.navbar li {
height: 100%;
}
to ensure they resize correspondingly with the brand image?