Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Secondary Navigation - Revisited

Question

Posted · Report post

In a previous post I needed to help to highlight on navigation item by defining a class to a menu item. I want the class to not only show a different color but change color when I mouse over it and when it is the active page. In a nutshell I want to define a class that will mimic the default behavior of the brandnav menu with my own custom color.

I have tried several iterations of the CSS code with no success. The first entry is what is currently uploaded:


.donate a {

color: white;

font-weight: bold;

background: blue;

border-radius: 5px;

}

.donate:hover {

background: orange;

}

I have also tried:

.donate a:hover {

background: orange;

}

and

.donate:hover a {

background: orange;

}

and

.donate:hover a:hover {

background: orange;

}

The first code snippet show orange at the corners only (I used orange so you can actually see what I am talking about). Any help will be appreciated.

Stephen

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi stephen

I´m not sure but please you can try change

background: orange;

for

background-color: orange;

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Stephen,

Try the following code:


// Hover
#site .donate a:hover {
background-color: red;
color: white;
}

// Active
#site .donate a:active {
background-color: green;
color: white;
}

// Current
#site .donate.current-menu-item a {
background: orange;
color: red;
}[/CODE]

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites