[Resolved] Search in navigation

[Jose]

Hello team,

I need help to place the Navigation Search icon into the menu on mobile.

Also to make the navigator less fat on mobile (only). I put some padding to make it the way it is on desktop, however in mobile the bottom padding is too large.

https://proyectovidaplena.com/programas/

Thanks.

[David]

Hi there,

where do you want the Mobile search nav to appear ?

You have this CSS in your site which is making the nav fatter:

.main-navigation:not(.slideout-navigation) .main-nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

Move that inside a desktop media query so it doesn’t apply to mobile:

@media(min-width: 769px) {
    .main-navigation:not(.slideout-navigation) .main-nav {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

[Jose]

Thank you David,

Navigation thickness is fixed!

About the Search icon, I read you answered somebody that it’s difficult to place the Search icon inside the menu on mobile. So I would like to have the Icon only on Desktop then. Please how can you hide Search Icon on mobile?

Thanks

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .mobile-bar-items .search-item {
        display: none;
    }
}

[Jose]

Hi Leo,

ummm Its not working.

[Leo]

I just checked the page and it’s working for me:
https://www.screencast.com/t/efFfyxiFXN

Can you clear your browser cache?

[Jose]

ohh yeah,

I forgot about W3Cache. Now its working fine.

Thanks, you’re the best!!

[Leo]

No problem 🙂

[Author]

Posts