[Resolved] Header widget above float right primary menu

[David]

Hello

How do I get the header widget to sit above the float right primary menu in the header instead of next to it?

http://cardwave-com.stackstaging.com/who-we-are-what-we-do/

Both navigation and header widget still need to float right on desktop though.

Thanks
Dave

[David]

Hi there,

you can use some CSS Grid:

.site-header .inside-header {
    display: grid;
    grid-template-columns: auto 1fr;
}
.site-logo {
    grid-column: 1;
    grid-row: 1 / 3;
}
.header-widget {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
}
.main-navigation {
    grid-row: 2;
    grid-column: 2;
}

You may want to place it in a media query to suit your needs.

[David]

That’s great, thank you!

[David]

You’re welcome

[Author]

Posts