Highlighted

Issues with :hover on certain menu items

New Here ,
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%;

}

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;

}

TOPICS
Create menus in Dreamweaver

Views

599

Likes

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

Issues with :hover on certain menu items

New Here ,
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%;

}

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;

}

TOPICS
Create menus in Dreamweaver

Views

600

Likes

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
Feb 26, 2018 0
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
Feb 26, 2018 0
LEGEND ,
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;

}

Likes

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
Reply
Loading...
Feb 26, 2018 0
New Here ,
Feb 26, 2018

Copy link to clipboard

Copied

This was it! Thank you for your help

Likes

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
Reply
Loading...
Feb 26, 2018 0