Mobile header search styling

Hi there,

can you share a link to the site so i can see the current layout?

Hi David, link shared.

So you want the Search to overlay the header/nav ?
If so can you disable the SG Optimizer so i can see where the current custom CSS is coming from.

The header as it is now is default GP with mobile header disabled. I would like to replicate the current search function as you see it, after I've enabled the mobile header - so the search form is displayed below the header with some margin around it.

SG Optimizer is now disabled, frustrating new SG installs begin with it enabled.

The only custom CSS below 768px right now is to set a max-width on the logo.

Hi Paul,

Just to make sure you want this search style for mobile header?
https://www.screencast.com/t/3C3jGn2wuzPi

If so, can you enable mobile header so we can work on the custom CSS?

Let me know :)

Hi Ying,

Yeah that's correct, mobile header is enabled now, thanks.

The mobile header is still NOT enabled on my site, can you confirm it has switched to mobile header when you are not logged in?

Make sure you flushed all cache including server cache.

Thanks :)

My fault - SG Optimizer was disabled but needs reenabling again after changes to flush the cache. Flushed and disabled again.

Give this CSS a try:

#mobile-header .navigation-search.nav-search-active {
    position: relative;
    order: 10;
    padding: 10px;
}
#mobile-header .navigation-search input.search-field {
    outline: auto;
}

Let me know :)

Perfect! IMO this should be how the search function handles by default with mobile header enabled. Very nice.

Thanks for your help :)

No problem :)