Archived topic
Off canvas naigation to wide on mobile
8 replies · Started by dave on February 7, 2022
Hello,
I working on my off canvas navigation. I am just using widgets (buttons and search) inside a container set to 400px to control the width. It looks fine on my tablet but on my phone the width is not being contained and it is displaying wider than the screen. How do I keep the off canvas navigation content contained on mobile?
Thank you,
Dave
Hi Dave,
This CSS should work:
.slideout-widget {
max-width: 100%;
}But as you are using GB blocks, I would recommend using a block element to build the slide out navigation using the inside_slideout_navigation hook.
Whoops, I didn't realize I can do it with a hook. I'll get on that shortly. Thank you again Ying :)
You are welcome :)
Just rebuilt it using the hook you suggested (thank you), but now the css code you provided is not keeping it contained on mobile? Do I need to edit the code now that I am using a hook?
If you are using a hook now, the CSS should not be required.
Can you link me to your site again as the topic is marked as resolved.
Let me know :)
Ive removed the css but it is still too wide for my phone?
Here's the site and thank you again for your help.
I managed to get it by using your css and changing the selector to one I created and added to the container I'm using :) Thank you
As long as it works :)
You are welcome!
