Main Menu Effect for active/current

[Alexander]

Hi,

how can i get the Effect, that the color of the active/current Menu Item is higher (above) than the Main Menu-Bar, such as in Sahifa Theme?

Thanks,

Alex

[Tom]

Hi Alex,

Try something like this:

.main-navigation .main-nav ul > .current-menu-item > a, 
.main-navigation .main-nav ul > .current-menu-parent > a, 
.main-navigation .main-nav ul > .current-menu-ancestor > a,
.main-navigation .main-nav ul > .current-menu-item > a:hover, 
.main-navigation .main-nav ul > .current-menu-parent > a:hover, 
.main-navigation .main-nav ul > .current-menu-ancestor > a:hover {
      -webkit-box-shadow: 0px -14px 0px 0px #000000;
      -moz-box-shadow: 0px -14px 0px 0px #000000;
      box-shadow: 0px -14px 0px 0px #000000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

This works great!

Many Thanks Tom.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hi Tom,

a little Problem with this: The first Level of the Main menue is ok and looks like it should. But if there are Subcategories, it looks strangely. Any Ideas?

Alex

[Tom]

I’ve edited the above code so it should only work on the top level items 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

For me it does not work, unfortunately.

[Tom]

Still showing on sub navigation or not showing at all?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Give this a shot:

.main-navigation .main-nav > ul > .current-menu-item > a, 
.main-navigation .main-nav > ul > .current-menu-parent > a, 
.main-navigation .main-nav > ul > .current-menu-ancestor > a,
.main-navigation .main-nav > ul > .current-menu-item > a:hover, 
.main-navigation .main-nav > ul > .current-menu-parent > a:hover, 
.main-navigation .main-nav > ul > .current-menu-ancestor > a:hover {
      -webkit-box-shadow: 0px -14px 0px 0px #000000;
      -moz-box-shadow: 0px -14px 0px 0px #000000;
      box-shadow: 0px -14px 0px 0px #000000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Yeahh Tom, this do the Job!

Thanks a lot.

[Tom]

Glad it’s working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mary Pearson]

Hi Tom,

This is exactly what I’d like to do with my sites at https://plantbest.com/us/shop/ and https://plantbest.com/ca/shop/ for both primary and secondary menus, but I need more help with it.

The code above shows a black line across the top of the current selection so I know I’m on the right track, but that’s as far as I can get.

Any chance you could give me the CSS for my site. There are no sub-menus or anything.

Many thanks!

[Tom]

Not sure I understand. Any chance you can create a new topic and post what you’re wanting to achieve and what you’ve tried?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mary Pearson]

Yes of course.

[Author]

Posts