Archived topic

Search below secondary navigation

7 replies · Started by Matthew on January 6, 2019

Viewing posts 1–8 of 8

January 6, 2019 at 12:28 pm #774711

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.

January 6, 2019 at 3:19 pm #774798

Hi there,

try this CSS:

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

January 6, 2019 at 4:53 pm #774845

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.

January 7, 2019 at 1:22 am #775030

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

January 7, 2019 at 5:02 am #775142

Hey David,

Yes correct :)

How can I achieve this?

Thanks!

January 7, 2019 at 5:05 am #775147

Give this a shot:

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

January 7, 2019 at 6:32 am #775203

That is great that works thanks! :)

January 7, 2019 at 6:53 am #775338

You're welcome

This archived topic is closed to new replies.

Start building better websites today.