Archived topic

Remove Search Icon/function in Mobile Header

3 replies · Started by Dave on February 10, 2021

Viewing posts 1–4 of 4

February 10, 2021 at 4:10 pm #1653725

I would like to remove the search icon from the mobile header but keep it implemented on desktop and tablet.
I have tried this code:
.mobile-bar-items .search-item {
display: none;
}

But it did not work.
Any ideas?

cheers,
Dave

February 10, 2021 at 10:02 pm #1653876

Hi there,

Try this CSS:

#mobile-header .menu-bar-items {
    display: none;
}

Optional: After hiding the search icon, you'll notice there's a space between the hamburger icon and the subscribe button. That's from the custom CSS you've added related to #mobile-header .mobile-bar-items .button

Modify your custom CSS to this:

#mobile-header .mobile-bar-items .button {
    line-height: 1;
    font-size: 14px;
    padding: 10px;
    margin: unset;
}

So it would look like this: https://share.getcloudapp.com/E0u9rXeg

February 11, 2021 at 7:24 am #1654583

Thanks Elvin. That worked.

cheers,

Dave

February 11, 2021 at 7:01 pm #1655203

Nice one. Glad it works for you. :D

This archived topic is closed to new replies.

Start building better websites today.