Archived topic
How to replicate mobile menu on desktop view *DO NOT want slide out or Overlay!
7 replies · Started by Mike on February 4, 2022
Hello just bought the pro theme. setting up my website. the off-canvas menu does not offer the same interaction that the mobile menu offers. both the slide out and the overlay block interaction with the page once you open the burger menu on desktop. See Image 1
Meanwhile, on mobile, you can still see the menu while scrolling through the page. See Image 2 
I just want to know how to replicate the same exact menu from mobile onto desktop I mocked up what I mean in the image attached. See Image 3
Please help! Thank you.
Hi there,
Try this:
1. Disable the Off Canvas Panel
2. Set the Menu Location to Primary Nav.
3. Customizer > Layout > Primary Navigation - set the Mobile Menu Breakpoint to a real high value eg. 10000 ( you will need to type in the field the slider only goes to 2000 )
This will display the standard mobile menu on all devices.
Once you done the above, share a link and ill provide the CSS required to stop the drop down menu from filling the width of the header.
Hi David, I've done what you asked and shared the link in the private information box. Thank you for your help!
Try this CSS:
@media (min-width: 769px) {
.inside-header {
position: relative;
}
#site-navigation.toggled {
position: absolute;
right: 0;
top: 100%;
}
}Thanks so much David! is there any way I can do this on the sticky menu as well?
Swap the CSS for this:
@media (min-width: 769px) {
.navigation-stick .inside-navigation,
.inside-header {
position: relative;
}
.main-navigation.toggled.navigation-stick .main-nav,
#site-navigation.toggled {
position: absolute;
right: 0;
top: 100%;
}
}Perfect Thanks!
Glad to be of help!
