Archived topic
Position Header Widget Directly Above Navigation
3 replies · Started by Tony on June 28, 2022
Hello,
I'm attempting to position the Header Widget directly above the Nav Menu, as a phone number CTA. I've followed the instructions provided in this previous help forum post: https://generatepress.com/forums/topic/move-top-widgets-right-above-nav-bar/ however the widget remains to the right of the nav.
One thing I notice is the div naming convention may be different due to the evolution of GP and/or Gutenberg? Or, more likely, I'm just confusing myself. :)
Any assistance would be much appreciated. Thank you!
Hi there,
its since we switched the themes grid to Flexbox, the header widget never really lined up well so it got moved to inline.
You could try this CSS:
@media(min-width: 1024px) {
.site-header .inside-header {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 1fr 1fr;
}
.site-logo {
grid-column: 1;
grid-row: 1 / -1;
}
.header-widget {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
}Note the 250px is the width of the first grid item ie. the site logo
Worked perfectly, David. Thanks for the assist!
Glad to hear that
