Issue with Wide Overlay in Hamburger Menu on Mobil

Bjarne Hansen

• January 08, 2025 00:37

Hi Brizy Support,

I’m experiencing an issue with the hamburger menu in my Brizy setup. When the menu is opened on mobile and tablet, the overlay (the black background area) spans the entire screen width, even though the actual menu content only takes up a smaller section on the left.

Issue Description:

• The overlay (#brz-mm-panels) stretches across the entire page, creating a wide black area unnecessarily.
• I would like the menu content to appear in a narrow column on the left while keeping the rest of the page visible and functional.

What I’ve Tried:

1. Limited the #brz-mm-panels width using CSS (width: 300px and position: fixed).
2. Adjusted the overlay background with background-color: rgba(0, 0, 0, 1).
3. Removed all unnecessary margins, padding, and backgrounds via CSS.
4. Tried various CSS approaches to prevent the overlay from covering the entire screen width.

Result: None of these solutions have resolved the issue completely, and the wide black overlay is still visible.

What I Need Help With:

• How can I restrict the overlay width to only include the menu content?
• Is there a built-in feature in Brizy that allows me to control the width and position of the menu?

I hope you can assist in finding a solution to this issue. Thank you in advance!

Best regards,
Bjarne

0

• 

  Ariel H.

  • January 08, 2025 09:57

  Hi Bjarne,  

  Thank you for reaching out to us.  

  Unfortunately, Brizy doesn’t offer built-in options to restrict the overlay width to only include the menu content or to adjust the width and position of the menu directly. However, you might find using a popup a more flexible solution for designing and positioning your menu.

  Here’s a simple example: https://youtu.be/l6K_aEncqM0

  You can create the menu using the icon element and set it to be visible only on mobile devices.

  Best regards,  
  Ariel H.

  0

Please sign in to leave a comment.