no search bar on mobile

[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.

[johnaps]

Anyone?

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

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

[Leo]

The site link you provided no longer works for me.

Can you double check?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

its sofianos-orthopedika.gr now

[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/

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

Removing it easy enough:

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

Swapping it for an alternative is much more difficult.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts