[Resolved] search doesn't fade out extra html in mobile Menu Bar

[Natalie]

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

[Tom]

Hi there,

Give this CSS a try:

.nav-search-active + .mobile-bar-items > a {
    opacity: 0.1;
}

Let me know 🙂

[Natalie]

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.

[Tom]

Glad I could help! 🙂

[Author]

Posts