Borders around menu items disappearing
Question
I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* { margin: 0PX; padding: 0PX; } header { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg); height: 100vh; background-size: cover; background-position: center; } .main-nav { float: right; list-style: none; margin-top: 30px; } .main-nav li { display: inline-block; } .main-nav li a { color: white; text-decoration: none; padding: 5px 20px; font-family: "roboto", sans-serif; font-size: 15px; } .main-nav li.active a { border: 1px solid white; } .main-nav li a:hover { border: 1px solid white; } .logo img { width: 200px; height: auto; float: left; } body { font-family: monospace; } .row { max-width: 1200px; margin: auto; } .hello { position: absolute; width: 1200px; margin-left: 0px; margin-top: 0px; } h1 { color: white; text-text-transform: uppercase; font-size: 70px; text-align: center; margin-top: 275px; } .button { margin-top: 30px; margin-left: 440px; } .btn { border: 1px solid white; padding: 10px 30px; color: white; text-decoration: none; margin-right: 5px; font-size: 13px; text-transform: uppercase; } .btn-one { background-color: darkorange; font-family: "roboto", sans-serif; } .btn-two { font-family: "roboto", sans-serif; } .btn-two:hover { background-color: darkorange; transition: all 0.5s ease-in; }
<HTML> <Head> <title> Drew's Blog</title> <link href="style.css" rel="stylesheet" type "text/css" </head> <body> <header> <div class="row"> <div class="logo"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png"> </div> <ul class="main-nav"> <li class="active"><a href=""> HOME </a></li> <li><a href=""> ABOUT </a></li> <li><a href=""> GALLERY </a></li> <li><a href=""> NEWS </a></li> <li><a href=""> CONTACT </a></li> <li><a href=""> LESSONS </a></li> </ul> </div> <div class="Hello"> <h1> Lets Get Started</h1> <div class="button"> <a href="" class="btn btn-one"> Get to Know Me</a> <a href="" class="btn btn-two"> Check out my lessons</a> </div> </header> </body> </html>
`
1 answers
solution1
0 2017-11-30 09:09:58
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active ( class="active"> ) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
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.