Archived topic
search doesn't fade out extra html in mobile Menu Bar
3 replies · Started by Natalie on June 11, 2018
Hi Tom
As per my comment on this post
https://generatepress.com/forums/topic/display-menu-items-on-menu-bar-mobile-devices/#post-596746
I’ve used the code you supplied to add a phone number into the mobile menu bar (as custom html).
It works fine, but I also have the navigation search option and when you click on the search icon, it doesn’t ‘fade out’ the phone number I have put in the mobile menu bar, so it gets in the way of entering your search term (on narrow screens).
Is there a class I need to add to my custom html so that it will fade out as well when I click on the search icon (the way the hamburger menu fades out)
I have started a new topic, so I can include the website URL as hidden
Thanks
Hi there,
Give this CSS a try:
.nav-search-active + .mobile-bar-items > a {
opacity: 0.1;
}
Let me know :)
Hi Tom
Works perfectly, thank you very much.
I had tried the 0.1 opacity on the mobile-bar-items, but of course that faded the X for closing the search as well.
That is very clever css to just target the extra 'a' tag that I have.
Glad I could help! :)