Archived topic
Move top widgets right above nav bar
10 replies · Started by Nadine on October 15, 2020
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 :)