Menu active style

Alexandre_xnumeric · November 2016

Hi guys,

I've changed the style of the top bar menu like this:

#Top_bar .menu > li > a::after {

}

#Top_bar .menu > li a::after {

}

So it looks like something like this page when it's active: http://www.activitesalacarte.com

But I would like to have the same effect on this page : http://www.activitesalacarte.com/produits-d-exposition/stand-exposition/magnum/

Maybe it's a line to add with .current-page-ancestor ....I'm just not sure how to do it.

Thank you and hope you can help me with this one !

Excellent theme guys !

Albert · November 2016

Hi,

to activate same active background, you need to use the following css:

#Top_bar .menu > li.current-page-ancestor > a::after{ opacity: 1; }
#Top_bar .menu > lli.current-page-ancestor { background: #FFF !important; }
#Top_bar .menu > li.current-page-ancestor a { color: #000 !important; }

Alexandre_xnumeric · November 2016

Perfect, so far so good !

Now, is there any way to have the elements in the sidebar to be highlighted as well ?

See example : http://www.activitesalacarte.com/produits-d-exposition/stand-exposition/magnum/

In this case, I would like to have the parent pages (stands sur-mesure, produits d'exposition, supports à bannières, porte-affiches) to have a different style so the customers can identify easily where he is on the website.

Thank you for your help again !

Albert · November 2016

To change the color of parent menu item, you need to use the following css:

.widget_mfn_menu ul li.current-menu-ancestor > a {
   background: #5d8da2; color:#fff;
}

Alexandre_xnumeric · December 2016

This not working, no effect at all...

Albert · December 2016

Yes, it works and the following screenshot https://snag.gy/OMgl8d.jpg is the best proof.

Alexandre_xnumeric · December 2016

I understand ok...But what I needed was to have all the categories with a specific color.

In this case, I would like to have my main categories highlighted as well.

Hope you can help me !

Albert · December 2016

But this is how the css we gave you above works. Did you saw the screenshot we sent you? https://snag.gy/OMgl8d.jpg - as you can see, main category is being highlighted.

Alexandre_xnumeric · December 2016

Yes I totally understand and saw it !

What I what is also to have for exemple "Stands sur-mesure" highlighted as well and the others as mentioned before.

Albert · December 2016

But this is how it would work exactly. Unfortunately, we have no possibility to test it because you do not have sidebar on other pages.

Alexandre_xnumeric · December 2016

We sell products.

Stands sur-mesure, stands d'expositions, supports à bannières, porte-affiches are our main categories.

Each of these categories have many product pages.

This is why that's it's important for us to have these categories highlighted so the clients will know where to look to change categories quickly.

I don't understand why it would matters that I have sidebar on other pages when I want to achieve it on this page.

Albert · December 2016

But we really do not understand what you are trying to tell us because the css we gave you above, highlight other menu items as well. As we wrote above, we did tested it on our demo and it's fine but we can not test it on your site because you do not have such sidebar menu on any other pages, like http://www.activitesalacarte.com/produits-d-exposition/support-a-banniere/cobra/ (as you can see, there is no sidebar menu on this page).

Alexandre_xnumeric · January 2017

it's not only for the menu ancestor but for all the main pages i've used to be the main categories.

Albert · January 2017

If the css customization we gave you above, does not work well, please do the list of few pages where it does not work and send it to us. But also, please put our custom css in the right field so we can check pages with existing css.

Menu active style

Comments