Archived topic
Sidebar navigation location in responsive view
3 replies · Started by Adam on June 29, 2022
Hi there. I've been using GP on my sites forever and love it. I've got one thing I can't quite work out. I have the secondary navigation location set to right sidebar. I want this menu to appear above the content when it hits the responsive breakpoint. I found this thread:
https://generatepress.com/forums/topic/sidebar-on-top-in-responsive-view/
But it moves the entire right sidebar above the content. Is there a modification to that CSS or some sort of PHP snippet that would move only the secondary navigation? This particular menu is critical to maneuver the site, and I'm afraid it will be lost below the content. Thanks for the help!
Hi Adam,
You can create a Hook Element and add this code:
<div class="custom-secondary-nav">
<?php generate_secondary_navigation_position(); ?>
</div>Hook it to somewhere like generate_after_header.
Make sure Execute PHP is enabled and set the Display Rule location appropriately.
Then, add this CSS in Appearance > Customize > Additional CSS:
@media (max-width: 768px) {
.is-right-sidebar.sidebar .gen-sidebar-secondary-nav {
display: none;
}
}
@media (min-width: 769px) {
.custom-secondary-nav {
display: none;
}
}Hope this helps! Kindly let us know how it goes.
Works perfectly, thanks for the quick answer! :)
You’re welcome Adam! Glad that worked! :)
