Best way to show/hide search bar in header when scrolling

[toolman]

Hi there,

I have the following layout for a business directory. I have my primary navigation and a search bar underneath for a search bar.

My issue is that, I am wondering if I keep the navigating and search bar fixed, that the header will be too large when scrolling? Ideally I would have both visible at the same time.

I would like to ask if anyone has any suggestions on how to do this, or if I should only keep the main nav visible at all times?

Any suggestions would be great, thanks.

[sibertius]

@toolman

I would like to ask if anyone has any suggestions on how to do this, or if I should only keep the main nav visible at all times?

IMHO Navigation should always be visible. But search bar may be a minimized icon. https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

[toolman]

Thanks for the reply.

That makes sense to have the navigation visible at all times.

Do you think the navigation should always be the first item, e.g. above the search form? Or could the search go on the same link as the CTA and then move the nav in the green bar?

[sibertius]

@toolman

Do you think the navigation should always be the first item, e.g. above the search form?

This is a “personal” preference. But I am always looking for search WITHIN the navigation bar. https://gowebstatic.tk as in this forum as well.