[Resolved] Mobile header search styling

Home Forums Support [Resolved] Mobile header search styling

Home Forums Support Mobile header search styling

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1961951
    Paul

    Hi,

    Can some CSS be provided to style navigation search to appear the same on mobile as default header layout / mobile header disabled?

    Search box to appear below, and have margin applied around it?

    Thanks,
    Paul.

    #1961987
    David
    Staff
    Customer Support

    Hi there,

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

    #1962080
    Paul

    Hi David, link shared.

    #1962430
    David
    Staff
    Customer Support

    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.

    #1962460
    Paul

    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.

    #1962493
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1962576
    Paul

    Hi Ying,

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

    #1962579
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1962701
    Paul

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

    #1962790
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1963182
    Paul

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

    Thanks for your help πŸ™‚

    #1963540
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.