Missing styling on sidebar menu

[azura_eyes]

Hi,

I have sidebar with a custom menu, static pages (but noticed same behaviour in product category sidebar as well).

There are some missing CSS styles for those:
1. when the parent is selected, even the children are marked as current in the sidebar menu, in here marked with red color
2. there are missing lines after the parent/before the first child
3. missing line after the last child/last item in the sidebar menu
4. as well missing current page in the top menu

Please see the attachment. Any solutions?

Thanks!

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Can you show the exact page for us to inspect.

Let us know,

Thanks,
laranz.

[azura_eyes]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

1) You need to set the menu nav active color

2) Add this to your custom css:

.widget_categories ul > li:first-child, .widget_archive ul > li:first-child, .widget_nav_menu ul > li:first-child, .widget_recent_comments ul > li:first-child, .widget_meta ul > li:first-child, .widget_recent_entries ul > li:first-child, .widget_product_categories ul > li:first-child, .widget_layered_nav ul li:first-child {
  border-top: 1px solid #e4e4e4;
}

– Kyle

[azura_eyes]

Thanks Kyle!

Yes, the active color is now set, thanks! And the line is there, thanks to your css code BUT still when the parent page is selected the BOTH parent and children are marked wtih the “current” color in the sidebar, and NOT only the current page (-> the parent). Please see in the link above.

[Kyle – SUPPORT]

Try this:

.widget_nav_menu ul > li.current-menu-item a {
  color: #111111;
}
.widget_nav_menu ul > li.current-menu-item > a {
  color: #dd3333;
}

– Kyle

[azura_eyes]

Thanks Kyle, but you need to add !important to those otherwise they don’t want to work. And then the a:hover otherwise the color does not change when the mouse is over the link… 🙂

.widget_nav_menu ul > li.current-menu-item a { color: #111111 !important; }
.widget_nav_menu ul > li.current-menu-item a:hover { color: #dd3333 !important; }
.widget_nav_menu ul > li.current-menu-item > a { color: #dd3333 !important; }

Hate to put those !important all over the css but sometimes is the only way…

[Kyle – SUPPORT]

Ok great 🙂 Glad you sorted it

– Kyle