Add background color to active menu item with css

Question

How to add background color to the active menu item with css (ie when I click on about link and go to about page I want that active menu item have red background)?

This is my code in Wordpress:

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'nav navbar-nav' ) ); ?> </ul> </nav>

and this is my css:

.navbar-inverse .navbar-nav > li > a:visited { background: red !important; }

But this css targets and "hover elements. What am I doing wrong?

Well, I think WordPress CMS toggles automatically a active class or something similar to that. So you can target only that one class. It would be nice if you could provide a snippet of already generated navigation bar HTML. — Ramiz Wachtler
– Ramiz Wachtler, Commented Nov 16, 2014 at 11:51

Damir · Accepted Answer · 2014-11-16 12:06:10Z

By default, WordPress menus output this class with the list item: current-menu-item so you can use this method to target active menu items:

li.current-menu-item { background: $sec-color; }

If your theme supports the creation of multiple navigation menus, then you’ll need to be a bit more specific in your CSS

#menu-main-pages li.current-menu-item { background: #3FAEA5; color:#fff; }

source: http://premium.wpmudev.org/blog/how-to-highlight-the-current-page-when-using-wordpress-navigation-menus/

Ramiz Wachtler · Accepted Answer · 2014-11-16 12:04:12Z

I just looked at some WordPress sites, so there are several options you could try, because I don't know which class your WordPress installation triggers if a menu item is active.

Option 1:

.navbar-inverse .navbar-nav > li.current-page-item > a{ background: red; }

Option 2:

.navbar-inverse .navbar-nav > li.current-menu-item > a{ background: red; }

Option 3:

.navbar-inverse .navbar-nav > li a.current { background: red; }

Collectives™ on Stack Overflow

Add background color to active menu item with css

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related