Copy link to clipboard
Copied
I'm trying to use the :hover feature on my menu, but I don't want it in use on the current page menu button. I've done this in the past with no issues, but now it isn't working. I've pasted both my html and css code below. Maybe I'm just missing something really obvious.
html:
<div class="topnav" id="myTopnav">
<a href="home.html" class="active first">Home</a>
<a href="details.html">Details</a>
<a href="story.html">Story</a>
<a href="rsvp.html">RSVP</a>
<a href="party.html">Wedding Party</a>
<a href="photos.html" class="menu_item">Photos</a>
</div>
css:
.topnav {
background-color: #07304c;
top: 0;
left: 0;
width: 100%;
position: fixed;
z-index: 100;
}
.topnav a {
display: block;
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "cormorant-garamond", "serif";
font-size: 19px;
}
.topnav a:hover {
background-color: #ddd;
color: #07304c;
}
.topnav .active a:hover {
background-color: #38596F;
color: white;
}
.active {
background-color: #38596F;
color: white;
}
.topnav .icon {
display: none;
}
.first {
margin-left: 30%;
}
There is NO active a in your html structure:
.topnav .active a:hover {
background-color: #38596F;
color: white;
}
Can you see the a tag within the class 'active' ?
<a href="home.html" class="active first">Home</a>
If you want to write your 'page marker' as you have your html set up you would need to use the below css:
.topnav .active:hover {
background-color: #38596F;
color: white;
}
Your nav should be styled as a list item:
<ul>
<li class="home"><a href="home.html" class="active first">Home</a></li>
<
...Copy link to clipboard
Copied
The way I do a "you are here" type of active links is to give each menu item a corresponding class (class="home" for the home button). Then use that same class in the body of the pages (so <body class="home"> in the home page). Then in the css, make a selector that targets each pair of classes and set the "active" styles there.
When the <body> and <a> class match, the "active" css shows. Here's a really basic example...
<!doctype html>
<html lang="en-us">
<head>
<title>You Are Here</title>
<meta charset="utf-8">
<meta name="description" content="">
<style>
.home a.home, .about a.about, .portfolio a.portfolio {
background-color:blue;
}
</style>
</head>
<body class="home">
<a class="home" href="home.html">Home</a>
<a class="about" href="about.html">About</a>
<a class="portfolio" href="portfolio.html">Portfolio</a>
</body>
</html>
Note when the body class matches the link class, that button turns blue. When you change it to about or portfolio, the corresponding button will light up without needing to change anything in the menu (your menu could be a php include if you like). The only thing that changes from page to page is the <body> class.
Copy link to clipboard
Copied
There is NO active a in your html structure:
.topnav .active a:hover {
background-color: #38596F;
color: white;
}
Can you see the a tag within the class 'active' ?
<a href="home.html" class="active first">Home</a>
If you want to write your 'page marker' as you have your html set up you would need to use the below css:
.topnav .active:hover {
background-color: #38596F;
color: white;
}
Your nav should be styled as a list item:
<ul>
<li class="home"><a href="home.html" class="active first">Home</a></li>
<li class="details"><a href="details.html">Details</a></li>
<li class="story"><a href="story.html">Story</a></li>
<li class="rsvp"><a href="rsvp.html">RSVP</a></li>
<li class="party"> <a href="party.html">Wedding Party</a></li>
<li class="photos"><a href="photos.html" class="menu_item">Photos</a></li>
</ul>
Then you can include a bit of css in the head section of each page which 'marks' the page
.home a {
background-color: #38596F;
color: white;
}
.details a {
background-color: #38596F;
color: white;
}
Copy link to clipboard
Copied
This was it! Thank you for your help