Site logo

Archived topic

Main Menu Effect for active/current

13 replies · Started by Alexander on August 3, 2015

Viewing posts 1–14 of 14

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

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;
}

This works great!

Many Thanks Tom.

You're welcome :)

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

I've edited the above code so it should only work on the top level items :)

For me it does not work, unfortunately.

Still showing on sub navigation or not showing at all?

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;
}

Yeahh Tom, this do the Job!

Thanks a lot.

Glad it's working :)

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!

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!

Yes of course.

This archived topic is closed to new replies.