Looking to customize the navigation on my website by creating a separate background for the list links menu and making sure the left part of the navigation with the logo has its own distinct background that extends until the next div. I've experimented with various approaches but none of them have worked as intended. The issue is that the background for the left side with the logo only occupies the space under the text rather than the entire div.
Check out the example below:
$('.navigation ul li a').on('mouseover', function() {
$(this).parent().addClass('navigation-hover');
}).on('mouseout', function() {
$(this).parent().removeClass('navigation-hover');
}).navigation {
font-size: 3em;
height: 70px;
position: fixed;
right: 0;
left: 0;
}
.navigation-logo {
float: left;
background-color: rgba(0, 0, 0, 0.2);
}
.navigation ul {
display: inline;
}
.navigation ul li {
float: right;
font-size: 0.5em;
line-height: 60px;
height: 70px;
display: inline-block;
text-align: center;
padding-left: 10px;
color: #ffffff;
padding-left: 10px;
background-color: rgba(0, 0, 0, 0.2);
}
.navigation-hover {
background: transparent !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="navigation">
<div class="navigation-logo">
<a class="navigation-logo">logo</a>
</div>
<div>
<ul>
<li><a href="">link1</a></li>
<li><a href="">link2</a></li>
<li><a href="">link3</a></li>
<li><a href="">link4</a></li>
</ul>
</div>
</div>