I really like the background that appears for the active menu item, but I wish it was a little more sensitive. Consider these cases:
On the home page: http://www.screencast.com/t/7a15PaJLiNa
On the sports category page: http://www.screencast.com/t/aHXnplUNk
On a post in the sports category: http://www.screencast.com/t/TQiaNuk9iKA
The last one is really nice. But wouldn’t it make sense to have it detect that the sports category is itself current too?
Any idea whether this is possible?
Hi,
I’m not sure I understand your question. Do you want a white background for all active menu elements?
For example if Home is selected to be shown like this: http://screencast.com/t/PluN07fc3G2 Is this what you are trying to do?
Please let me know and please provide more details.
Thanks
Yup, exactly!
Hi,
Please try this css:
.blog-stack .sf-menu .current-menu-item a, .blog-stack .sf-menu .current-menu-parent .current-menu-item a, .blog-stack .sf-menu .current-menu-parent > a, .blog-stack .sf-menu > li:hover > a, .blog-stack .sf-menu ul li:hover > a, .blog-stack .td-post-text-content .more-link-wrap:hover a, .blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat, .blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat:hover, .blog-stack .td-mega-menu .block-mega-child-cats a:hover, .blog-stack .td_mod_mega_menu:hover .item-details a {
color: #3daced !important;
background-color: #ffffff;
}Remove the classes for hover if you don’t want this effect to happen when a menu item is hovered.
Hope this helps!
Thanks
Perfect, thanks!
Hmm… One minor side effect is that if you’re on a category, then any subcategory items in the dropdown menu are also white, which means they have no change on hover (see e.g. the Opinion dropdown when you’re on http://building.mediumutm.ca/opinion/). Whereas it works great when on one of the subcats themselves: http://building.mediumutm.ca/opinion/editorial/
Is it possible to differentiate that? Probably not, eh? (I guess I could style those items with a new dropdown class that doesn’t react like that)
Hi,
I’m not sure that I understand what are you trying to achieve, I have noticed that you figured out that the menu items are all withe because of the active status they have which dose nothing when hovered because are already white like you said.
You cloud try to change the link color when hovered and use something different from white.
Hope this helps!
Thanks
Yup – the question is, when a parent category is active, all its child cats are also considered active, judging by how they respond to this CSS (e.g. on the Opinion page I linked to).
So I was wondering if there was a way to distinguish between those two in CSS, to have the parent category reflect being active but not the child. Seems unlikely, though.
If not maybe the dropdowns should just not have this effect of being white when active… but I’m not sure — is that class .sub-menu?
Hi,
Try this custom css, also please remove this part .blog-stack .sf-menu .current-menu-item a from the css I gave you above. As I could not overwrite that part, which is the one that targets the current drop down menu item, it would be better you remove it from the previous custom css and add this one only for the current drop down menu items.
.blog-stack .sf-menu .current-menu-item a {
color: #ffffff !important;
background-color: inherit !important;
}Hope this helps!
Thanks
Thanks!
Hmm, didn’t work… disabled the highlighting altogether, except on the subcategory :p I’ll leave it like this for a bit so you can see: http://building.mediumutm.ca/opinion/
Hi,
This is why I said you would have to remove the .blog-stack .sf-menu .current-menu-item a from the initial css that i gave you first, this is preventing the last one to apply because of the !important
Just remove this .blog-stack .sf-menu .current-menu-item a and add see if it’s working.
Thanks
Indeed, I did (and cleared cache), but still no luck. This is what it looks like; is it right?
.blog-stack .sf-menu .current-menu-parent .current-menu-item a, .blog-stack .sf-menu .current-menu-parent > a, .blog-stack .sf-menu > li:hover > a, .blog-stack .sf-menu ul li:hover > a, .blog-stack .td-post-text-content .more-link-wrap:hover a, .blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat, .blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat:hover, .blog-stack .td-mega-menu .block-mega-child-cats a:hover, .blog-stack .td_mod_mega_menu:hover .item-details a {
color: #3daced !important;
background-color: #ffffff;
}
.blog-stack .sf-menu .current-menu-item a {
color: #ffffff !important;
background-color: inherit !important;
}
Hello,
Do you want to have the white background on all active menu or elements from the menu?
Remove all CSS provided above and try this one:
body.blog-stack .sf-menu .current-menu-item a {
background-color: #ffffff !important;
}Thanks!
Thanks for this CSS.
It would be great to have white background on:
(1) The page or category you’re on (Home, News, etc.)
(2) The category of the post or the you’re on (e.g. News for a news article)
(3) Parent category (e.g. Opinion when on Letter to the Editor: http://building.mediumutm.ca/opinion/letter-to-the-editor/ )
I can give up (3). (The original CSS from Lucian included it and the latest one doesn’t, but it doesn’t matter much to me either way.)
The only problem is that both groups of CSS also have this highlighting:
(4) The child categories of the parent category you’re on (e.g. all the dropdown items when on Opinion: http://building.mediumutm.ca/opinion/)
When this happens, hovering over the items in the dropdown has no visual response because they’re all selected, even though you’re only on the parent.
Is it possible to have the parent without the children?
(P.S. Will leave your CSS in for now so you can check)
Hi,
This is the css that makes the background of the curent menu sub-items white, I have tested thi on your site: http://screencast.com/t/xN4PHl3XmZ5
You have to remove this custom css from tehem panel:
body.blog-stack .sf-menu .current-menu-item a {
background-color: #ffffff !important;
}Then add this one:
body.blog-stack .sf-menu .current-menu-item a, .blog-stack .sf-menu ul li:hover > a {
color: #ffffff !important;
}
body.blog-stack .sf-menu .current-menu-item .sf-with-ul {
color: #1b6cd6 !important;
}
body.blog-stack .sf-menu .current-menu-parent .current-menu-item a {
background-color: #1b6cd6!important;
}Like I said, I have tested this on your site and works, just make sure you remove that css I have pointed you and add the other to custom css.
Thanks
Hmm… that one is close, but makes the active text itself white, and using background-color instead of color gets us back where we started.
After trying to fiddle with this for a long time, and finding that there are so many classes involved that my just-learning knowledge of CSS is not enough, I made this quick screen capture to demonstrate what I mean.
This is using Lucian’s first CSS, which is actually the closest to what I want to see. That’s what I’ll leave on there for now.
Four things shown in the video:
(1) On Home page everything is fine. I wouldn’t want to lose any of that
(2) On test cat archive the two dropdown items are highlighted
(3) BUT on a post in test cat, the two dropdown items are not highlighted. This is exactly what (2) should look like
(4) Just showing a post in a subcat of test cat, which is also working correctly
So I feel like the styling is there already, but it’s a problem of making the parent cat archive not treat the subcats as active. Or if there is an extremely specific CSS class for subcat dropdown menu items whose parent is active, and which doesn’t break (4)…
Sorry to bother you so much! All your posts are really appreciated, but none of them have gotten those results so far 🙁 I might just live with this if I have to…
Hi,
You cloud try to find a better way of targeting or leave it like that if you don’t know how to do it or hire someone to do it for you.
Thanks for the message
After digging a bit and getting an answer on the WP Stack Exchange I realized this has to do with child vs. descendant. I have it working 🙂
But it also required editing one part of td_css_generator.php. So I wanted to alert you guys to what I think is a bug in the theme. This CSS in td_css_generator:
.blog-stack .sf-menu .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent .current-menu-item a,
.blog-stack .sf-menu .current-menu-parent > a,
.blog-stack .sf-menu > li:hover > a,
.blog-stack .sf-menu ul li:hover > a,
.blog-stack .td-post-text-content .more-link-wrap:hover a,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat,
.blog-stack .sf-menu ul .td_mega_menu_sub_cats a.cur-sub-cat:hover,
.blog-stack .td-mega-menu .block-mega-child-cats a:hover,
.blog-stack .td_mod_mega_menu:hover .item-details a{
color:@link_color !important;
}
Should maybe have this for the first line?
.blog-stack .sf-menu .current-menu-item > a,
Because otherwise, even when I remove all my custom CSS for the menu, the dropdown from a current item has the same background colour and font colour. This was actually my first question on the support forum:
https://forum.tagdiv.com/topic/menu-dropdown-broken/
So yeah. If others have seen this problem, hope that helps!
(In the meantime… is there any way for me to overwrite td_css_generator with a child theme?)
