Skip to main content
kevinb71678699
kevinb71678699
Participating Frequently
February 26, 2018
Answered

Issues with :hover on certain menu items

  • February 26, 2018
  • 2 replies
  • 1024 views

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%;

}

This topic has been closed for replies.
Correct answer osgood_

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;

}

2 replies

O
osgood_Correct answer
Legend
February 26, 2018

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;

}

kevinb71678699
kevinb71678699Author
Participating Frequently
February 26, 2018

This was it! Thank you for your help

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 26, 2018

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices