no search bar on mobile

Anyone?

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 :)

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

The site link you provided no longer works for me.

Can you double check?

Let me know :)

its sofianos-orthopedika.gr now

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/

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

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!

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.

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

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

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!

Removing it easy enough:

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

Swapping it for an alternative is much more difficult.