[Support request] no search bar on mobile

Home Forums Support no search bar on mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1022177
    johnaps

    Hello,

    I cant see woosearch bar no matter what i do when i select mobile header = “on” on costumize.
    And if i have it off logo, search, cart is one bellow an other and i want it to be horizontally in one line.

    * Also when i have mobile header on beside woosearch disappearing also cart is disappearing which is located in my secondary menu.

    Can you help me? Tried a lot before contacting you, thank you for your time.

    #1022392
    johnaps

    Anyone?

    #1022637
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry for the late reply! It was Sunday night.

    Mobile header removes all header content by default.

    Can you try adding the search bar using Hooks Element with generate_inside_mobile_header hook as well?
    https://docs.generatepress.com/article/hooks-element-overview/

    Then we should be able to rearrange things with some CSS.

    Let me know 🙂

    #1022795
    johnaps

    i managed to make it appear…
    but it looks like this!

    aa

    #1022821
    Leo
    Staff
    Customer Support

    The site link you provided no longer works for me.

    Can you double check?

    Let me know 🙂

    #1022829
    johnaps

    its sofianos-orthopedika.gr now

    #1022895
    johnaps

    i ll live it as it is for an hour or so, so you can see it live, but i ll disable mobile header “on” option in costumize after, so it looks normal until we find out a solution… cause its a live site now

    https://sofianos-orthopedika.gr/

    #1022903
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a shot:

    .site-logo.mobile-header-logo {
        margin-right: 0;
    }
    
    #mobile-header #quadmenu {
        order: 10;
        flex-basis: 100%;
    }
    
    #mobile-header .dgwt-wcas-search-wrapp.dgwt-wcas-no-submit.woocommerce {
        max-width: 100px;
        margin-right: 0;
    }
    
    #mobile-header .woo-search {
        order: 2;
        flex-grow: 0;
        margin-bottom: 0;
        margin-right: auto;
        margin-left: auto;
    }
    
    #mobile-header .inside-navigation {
        align-items: center;
    }
    #1022912
    johnaps

    it did the job for large phone screens, but if you check on medium or small phone screens it looks messy!

    Thank you very much for your time though!

    #1023293
    David
    Staff
    Customer Support

    Hi there,

    what do you want it to do on the smallest phone screens ?
    There doesn’t look to be enough space for the logo / search / nav all to be inline and still be functional.

    #1023308
    johnaps

    ok then if i hide or replace logo with smaller, it will be inline?

    can you tell me how to hide?
    and how to replace logo to test it?

    thank you very much

    #1023313
    David
    Staff
    Customer Support

    You can change the logo in Customizer > Layout > Header –> Mobile Header Logo.

    #1023317
    johnaps

    i know yes!

    But i want the logo to change only on medium and small phone screens not large phone screens!

    For example in my note9 it looks perfect i dont want to change the way it looks for big phone screens…

    But if i have to compromise for medium and small phone screens how can i change or hide logo only for these?

    Thank you!

    #1023338
    David
    Staff
    Customer Support

    Removing it easy enough:

    @media (max-width: 360px) {
        .site-logo.mobile-header-logo {
            display: none;
        }
    }

    Swapping it for an alternative is much more difficult.

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