[Resolved] Search below secondary navigation

[Matthew]

Hi,

I have used the header widgets to insert a search box in the header but I wanted the search box to appear below the secondary navigation (the change country etc links).

Is this possible? Maybe with the use of Elements?

Thanks.

[David]

Hi there,

try this CSS:

@media (min-width: 768px) {
    .inside-header {
        position: relative;
    }
    .header-widget {
        position: absolute;
        right: 40px;
        bottom: 2em;
    }
}

[Matthew]

Hey David,

That’s great thanks – I just noticed though that the search box even though on the right hand side is going above the logo on mobile?

Is there a simple way to stop this happening?

Cheers.

[David]

Which order would you like the header to mobile?
Logo > Site Branding > Search Bar?

[Matthew]

Hey David,

Yes correct 🙂

How can I achieve this?

Thanks!

[David]

Give this a shot:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column-reverse;
    }
}

[Matthew]

That is great that works thanks! 🙂

[David]

You’re welcome

[Author]

Posts