Site logo

Archived topic

Move top widgets right above nav bar

10 replies · Started by Nadine on October 15, 2020

Viewing posts 1–11 of 11

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

Hi there,

Can you try adding them as header widgets first?

Let me know :)

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

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 :)

Perfect, thank you so much!

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

Hi there,

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

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

Try this CSS:

.header-widget {
    display: flex;
}

thank you!!

No problem :)

This archived topic is closed to new replies.