• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Issues with :hover on certain menu items

New Here ,
Feb 26, 2018 Feb 26, 2018

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

}

Views

814

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 26, 2018 Feb 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>

<

...

Votes

Translate

Translate
Community Expert ,
Feb 26, 2018 Feb 26, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 26, 2018 Feb 26, 2018

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 26, 2018 Feb 26, 2018

Copy link to clipboard

Copied

LATEST

This was it! Thank you for your help

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines