Archived topic
Left sidebar on mobile relocate to top of content
5 replies · Started by Former User on August 6, 2018
I have a membership site in which I want to use the secondary menu in the left sidebar on some pages and the primary menu on the left sidebar on other pages. However, when placing it in the left sidebar, the mobile version shows the sidebar/menu on the bottom instead of above the content. To resolve this, I tried to use the sidebar module in the Lite Beaver Builder however, when adding the navigation widget, it removes all the colors and settings I set in the customizer. Is there a way to fix this either in Beaver Builder or in GeneratePress?
Hi Michelle,
Is this happening to both the primary and secondary navigations, or only the secondary navigation?
Let me know :)
It only happens with the secondary navigation.
Try adding this function to your site:
add_action( 'wp_footer', function() {
?>
<script>
var target, nav, clone;
nav = document.getElementById( 'secondary-navigation' );
if ( nav ) {
clone = nav.cloneNode( true );
clone.className += ' sidebar-nav-mobile';
clone.setAttribute( 'aria-label', '<?php esc_attr_e( 'Mobile Menu', 'generatepress' ); ?>' );
target = document.getElementById( 'primary-navigation' );
if ( target ) {
target.insertAdjacentHTML( 'afterend', clone.outerHTML );
} else {
document.body.insertAdjacentHTML( 'afterbegin', clone.outerHTML )
}
}
</script>
<?php
} );That worked but it still shows at the bottom. When I click on the bottom menu, it will go back up to the top and dropdown the top menu. Really weird. The top works fine.
Try adding this CSS as well:
@media (max-width: 768px) {
#secondary-navigation:not(.sidebar-nav-mobile) {
display: none;
}
}