[KingSwiff]

KingSwiff

#9629

Hi there.

I want the top menu to be like it is, but with a small twist. If the menu item is active, I want another action, than if not active, when a:hover. But it seems like a:active don’t work in the css. Is that true, or do I mis something?

[Anonymous]

Anonymous

#44190

Your active menu is light blue and when you hover any menu (active and inactive) it shows a dark blue hover color. So what else do you want for the menu? I don’t quite understand.

You want a separate hover color for the active menu and one for the inactive menus?

[KingSwiff]

KingSwiff

#44191

Yes exactly.

I want to imitate the buttons in the menu, so when hover a non active page I want the light blue color, and when hover the active page I want the darker blue and the lighter blue when not hover. If possible 🙂

[Kenneth John Odle]

Kenneth John Odle

#44192

Quote:

If the menu item is active, I want another action, than if not active, when a:hover. But it seems like a:active don’t work in the css.

I think you are confusing a:hover and a:active, which are pseudoclasses built into CSS, with a.current, which is a CSS class that you can define.

:hover and :active are dependent upon mouse actions. :hover comes into play when you hover your pointer over something with that pseudoclass; :active comes into play in the time between when you click on an item and when you release the mouse button.

.current is a user-defined CSS class that is usually applied to the page link on the page you are actually on. In the case of Graphene, the actual css class for the top menu is .current-menu-item.

Hope this helps.

[KingSwiff]

KingSwiff

#44193

You are right, now I know, I didn’t understand a:active – thanks for the good explanation!

And it works perfect with .current-menu-item thanks again.

If somebody could use this one day, the final code looks like:

#header-menu > li.current-menu-item a:hover {

background-color: #4476dd !important;

height: 13px;

}