When I hover over an element why won't the whole content box change color? There's empty space to the left
Question
I am trying to create a responsive side menu to slide in and out. I want the hover states of each element to extend the full width of the container but for some reason there is always a gap and I can't get the text to align to the right. I have tried everything I know and researched as best as I could and found nothing. Could someone help me understand what is going wrong?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar animated fadeIn">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</span>
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div class="side-hidden">
</div>
<div id="side-menu" class="side-nav">
<ul>
<li><a href="#" class="btn-close" onclick="closeSlideMenu()">×</a></li><br>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
<script>
function openSlideMenu(){
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';
}
</script>
</body>
</html>
body, html{
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
.container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/*-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 100px;
margin: 0;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 15px;
left: 30px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
}
.navbar-links a {
display: inline;
color: #444444;
text-decoration: none;
text-align: center;
margin: 0 5px 0 0;
font-size: 15px;
padding: 10px 17px;
right: 25px;
}
nav .active {
background: #CE2026;
color: #FFFFFF;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
height: 100px;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
font-size: 1.4em;
}
#number {
float: right;
padding-right: 0;
margin-top: 50px;
margin-right: 85px;
font-size: 21px;
font-weight: normal;
}
.side-hidden {
background-color: #000;
opacity: 0.6;
height: 1000px;
width: 100%;
position: relative;
top: 0;
right: 250px;
margin: 0;
display: none;
}
/* Responsive Menu*/
.open-slide {
float: right;
z-index: 5;
display: none;
}
.side-nav {
width: 0;
height: 100%;
z-index: 1;
position: fixed;
background-color: #111;
opacity: 0.9;
transition: 0.5s;
right: 0px;
text-align: right;
display: block;
transition: 0.3s;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
color: #ccc;
z-index: 6;
}
.side-nav ul a {
position: relative;
width: 100%;
padding: 10px 130px 10px 100px;
text-decoration: none;
color: #ccc;
margin-right: 20px;
z-index: 6;
right: 30px;
text-align: right;
}
.side-nav .btn-close {
position: absolute;
top: 0;
left: 22px;
font-size: 36px;
}
.side-nav a:hover {
color: #fff;
background: #CE2026;
}
@media only screen and (max-width: 1000px) {
.navbar-links {
display: none;
}
.open-slide {
display: block;
margin-right: 5%;
margin-top: 3.5%;
}
}
First minimize the screen to toggle the mobile view. When you click the hamburger menu it slides out. But when you hover over the nav links only a portion of the element block highlights red instead of the full width. And the highlight blocks are supposed to be one right on top of the other, but there's gaps between the nav links. I don't know why I can't get it to do what I want and I feel like I've tried everything.
2 answers
solution1
0 ACCPTED 2019-05-12 06:20:57
Give your unordered list inside #side-menu a padding of 0px; then remove right: 30px; from the anchors inside .nav-item . I also tweaked with some of your properties to make it work. You can see the working code bellow(See in full page view):
body, html{ font-family: 'Raleway', sans-serif; margin: 0; padding: 0; width: 100%; } .container{ max-width: 980px; margin-left: auto; margin-right: auto; } /*-- ----------------------------------------------------------------------------------- --> <!-- NAVIGATION --> <!-- ----------------------------------------------------------------------------------- --*/ .navbar { background-color: #FFFFFF; width: 100%; height: 100px; margin: 0; border-bottom: 8px solid #CE2026; } .navbar-links { max-width: 1090px; margin-left: auto; margin-right: auto; position: relative; bottom: 15px; left: 30px; } .navbar-links a:hover { background: #831517; color: #FFFFFF; transition: background 0.4s ease 0s; transition-property: background; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; } .navbar-links a { display: inline; color: #444444; text-decoration: none; text-align: center; margin: 0 5px 0 0; font-size: 15px; padding: 10px 17px; right: 25px; } nav .active { background: #CE2026; color: #FFFFFF; } .navbar ul { margin: 0 auto; padding: 0; list-style: none; text-decoration: none; width: 100%; height: 100px; } ul li { list-style: none; display: inline-block; margin-top: 50px; font-size: 1.4em; } #number { float: right; padding-right: 0; margin-top: 50px; margin-right: 85px; font-size: 21px; font-weight: normal; } .side-hidden { background-color: #000; opacity: 0.6; height: 1000px; width: 100%; position: relative; top: 0; right: 250px; margin: 0; display: none; } /* Responsive Menu*/ .open-slide { float: right; z-index: 5; display: none; } .side-nav { width: 0; height: 100%; z-index: 1; position: fixed; background-color: #111; opacity: 0.9; transition: 0.5s; right: 0px; text-align: right; display: block; transition: 0.3s; z-index: 6; } .side-nav ul { display: block; text-decoration: none; color: #ccc; z-index: 6; /* Added this */ padding: 0; } /* Added this */ .nav-item { display:block; } .side-nav ul a { position: relative; width: 100%; /* Changed this */ /* padding: 10px 130px 10px 100px;*/ padding: 10px 15px; text-decoration: none; color: #ccc; margin-right: 20px; z-index: 6; /* Removed this */ /* right: 30px; */ text-align: right; /* Added these */ display: block; box-sizing: border-box; } .side-nav .btn-close { position: absolute; top: 0; /* Changed this */ /* left: 22px; */ left: 0; font-size: 36px; } .side-nav a:hover { color: #fff; background: #CE2026; } @media only screen and (max-width: 1000px) { .navbar-links { display: none; } .open-slide { display: block; margin-right: 5%; margin-top: 3.5%; } }
<nav class="navbar animated fadeIn"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#000" stroke-width="5"/> <path d="M0,14 30,14" stroke="#000" stroke-width="5"/> <path d="M0,23 30,23" stroke="#000" stroke-width="5"/> </svg> </a> </span> <ul class="navbar-links"> <li><a class="active" href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT US</a></li> <li id="number">(360) 679-4444</li> </ul> </nav> <div class="side-hidden"> </div> <div id="side-menu" class="side-nav"> <ul> <li><a href="#" class="btn-close" onclick="closeSlideMenu()">×</a></li><br> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </div> <script> function openSlideMenu(){ document.getElementById('side-menu').style.width = '250px'; } function closeSlideMenu(){ document.getElementById('side-menu').style.width = '0'; } </script>
solution2
0 2019-05-12 06:43:33
I hope this can help:
1 suggestion instead of changing the width of navbar on click you can use display property (I have implemented this) :
<div id="side-menu" style="width:250px; display:none;" class="side-nav">
.....
<script>
function openSlideMenu(){
document.getElementById('side-menu').style.display = 'block';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.display = 'none';
}
</script>
body, html{ font-family: 'Raleway', sans-serif; margin: 0; padding: 0; width: 100%; } .container{ max-width: 980px; margin-left: auto; margin-right: auto; } /*-- ----------------------------------------------------------------------------------- --> <!-- NAVIGATION --> <!-- ----------------------------------------------------------------------------------- --*/ .navbar { background-color: #FFFFFF; width: 100%; height: 100px; margin: 0; border-bottom: 8px solid #CE2026; } .navbar-links { max-width: 1090px; margin-left: auto; margin-right: auto; position: relative; bottom: 15px; left: 30px; } .navbar-links a:hover { background: #831517; color: #FFFFFF; transition: background 0.4s ease 0s; transition-property: background; transition-duration: 0.4s; transition-timing-function: ease; transition-delay: 0s; } .navbar-links a { display: inline; color: #444444; text-decoration: none; text-align: center; margin: 0 5px 0 0; font-size: 15px; padding: 10px 17px; right: 25px; } nav .active { background: #CE2026; color: #FFFFFF; } .navbar ul { margin: 0 auto; padding: 0; list-style: none; text-decoration: none; width: 100%; height: 100px; } ul li { list-style: none; display: inline-block; margin-top: 30px; font-size: 1.4em; } #number { float: right; padding-right: 0; margin-top: 50px; margin-right: 85px; font-size: 21px; font-weight: normal; } .side-hidden { background-color: #000; opacity: 0.6; height: 1000px; width: 100%; position: relative; top: 0; right: 250px; margin: 0; display: none; } /* Responsive Menu*/ .open-slide { float: right; z-index: 5; display: none; } .side-nav { width: 0; height: 100%; z-index: 1; position: fixed; background-color: #111; opacity: 0.9; transition: 0.5s; right: 0px; text-align: right; display: block; transition: 0.3s; z-index: 6; } .side-nav ul { display: block; text-decoration: none; color: #ccc; z-index: 6; } .side-nav ul a { position: relative; width: 100%; padding: 10px 130px 10px 100px; text-decoration: none; color: #ccc; margin-right: 0%; z-index: 6; right: 40px; text-align: right; } /* Modified this */ .btn-close { position: absolute !important; font-size: 36px; padding: 0px !important; padding-right: 0px !important; width: 100% !important; right: 0 !important; margin-top: 0 px; text-align: middle !important; z-index: 6; top: 0px; } .side-nav a:hover { color: #fff; background: #CE2026; } @media only screen and (max-width: 1000px) { .navbar-links { display: none; } .open-slide { display: block; margin-right: 5%; margin-top: 3.5%; } }
<html> <head> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Brushworks NW Inc.</title> </head> <body> <body> <nav class="navbar animated fadeIn"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#000" stroke-width="5"/> <path d="M0,14 30,14" stroke="#000" stroke-width="5"/> <path d="M0,23 30,23" stroke="#000" stroke-width="5"/> </svg> </a> </span> <ul class="navbar-links"> <li><a class="active" href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT US</a></li> <li id="number">(360) 679-4444</li> </ul> </nav> <div class="side-hidden"> </div> <div id="side-menu" style="width:250px; display:none;" class="side-nav"> <ul> <li><a href="#" class="btn-close" onclick="closeSlideMenu()"> × </a></li><br> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </div> <script> function openSlideMenu(){ document.getElementById('side-menu').style.display = 'block'; } function closeSlideMenu(){ document.getElementById('side-menu').style.display = 'none'; } </script> </body> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
When I hover over my nav menu it pushes content down, why? How do i change color of li when hover over?
Activate hover only over content, not over empty space in the box
Why does the <li> element not change color and width when I hover the mouse over it after hovering over the image?
Change color when hover over element
change color of parent element when hover over child element
Why won't this drop shadow go away when I hover over the buttons?
Why is parts of the css hover color getting left over when hovering over links?
Navbar a:hover won't change backgroundd color
Font color won't change on hover
Hyperlink won't change color on hover or on visited
Related Tags