[Resolved] Move top widgets right above nav bar

[Nadine]

Hi,
I am trying to add 2 widget areas right above my nav bar, float right of the logo. I am using the Widgets Shortcode plugin to add the widget areas using a hook ‘generate_before_navigation’ – but it’s putting it next to it instead of right above.
Thanks

[Leo]

Hi there,

Can you try adding them as header widgets first?

Let me know 🙂

[Nadine]

I switched it to the header widget and they are on the same line as the nav, not above.

[Tom]

Hi there,

This can be done, but it takes a little tweaking:

First, add this PHP:

add_action( 'wp', function() {
    remove_action( 'generate_after_header_content', 'generate_do_header_widget' );
    add_action( 'generate_before_navigation', 'generate_do_header_widget', 20 );
} );

add_action( 'generate_before_navigation', function() {
    echo '<div class="primary-navigation-wrapper">';
}, 15 );

add_action( 'generate_after_navigation', function() {
    echo '</div>';
} );

Then add this CSS:

.nav-float-right .primary-navigation-wrapper {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 768px) {
    .primary-navigation-wrapper {
        flex-basis: 100%;
    }
}

Let me know 🙂

[Nadine]

Perfect, thank you so much!

[Nadine]

Sorry, thought it was resolved, but then I changed the 2nd top widget to social icons and the ended up below the search bar.

[David]

Hi there,

can you share a link to the site so we can see the issue?

[Nadine]

Sorry, thought you had it from my earlier post. I added it to the private info.

[Leo]

Try this CSS:

.header-widget {
    display: flex;
}

[Nadine]

thank you!!

[Leo]

No problem 🙂

[Author]

Posts