**SOLVED** Overlay menu hamburger icon

MGD4me · Post by **MGD4me** » Sun Dec 25, 2022 11:51 pm

Using WWB 18.0.5

I've been wrestling with various menus (panel, overlay, and others, etc), and have found that there is always one or two features which trip me up. The best fit for application, seems to be the the Overlay Menu, as it supports sub menus.

Everything works fine if I select Fullscreen, in the Overlay Display section. I can shrink the hamburger field to a minimum size, and with a transparent background, the icon can be placed close to the right hand side of the web page.

However, I would prefer to select Popup, instead of Fullscreen. When I do this, then I need to enlarge the hamburger field size to accommodate Popup menus 225 wide, the hamburger icon moves to the center of this field. I don't see a way move moving the hamburger to a Left/Center/Right position.

If I select Popup, with a minimalist hamburger field size placed on the RHS, then it really messes up the final popup menu placement. Any help would be appreciated.

Thanks!

Post by **Pablo** » Mon Dec 26, 2022 8:14 am

I don't see a way move moving the hamburger to a Left/Center/Right position.

There is currently no option to set the position of the popup menu. It will always be aligned with the left edge of the button.

You can set the popup width via the 'popup width' property of the overlay menu.
If you need further assistance then please share a DEMO project, so I can see what you have done.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

MGD4me · Post by **MGD4me** » Mon Dec 26, 2022 5:25 pm

I think my request was a bit ambiguous, and so I just want to clarify what my issue is...

Hopefully this image gets posted correctly: (I can't get the image to display in-line, but the link does work in a new tab. Hmmm...)

My question is, is there a way to position the actual hamburger icon to the right hand side of the field which is displayed? To place the popup menus in the correct location on screen, it seems that I need to create a wide enough field (eg 250), but that results in the hamburger moving to the center, as per the photo. I'd like to hamburger icon closer to the right hand edge, if possible. Other than that, the popup menu works great!

Thanks again...

Post by **Pablo** » Mon Dec 26, 2022 6:04 pm

I cannot see how you have added the menu to the page, but if it's inside a layout grid then you can align it to the right side.

If you need further assistance then please share a DEMO project, so I can see what you have done.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

MGD4me · Post by **MGD4me** » Mon Dec 26, 2022 11:28 pm

I created a demo project from scratch, here: https://drive.google.com/file/d/1gjtypk ... sp=sharing

I added a simple layer with a maroon background, a sample Title, and the an 'almost stock' overlay menu.

In the overlay menu I changed a few colours, and included a border around the 'button', and made the background transparent. I set the Maximum width, and Popup width to 250 each (to begin with, but may need to adjust slightly).

The issue is that the hamburger icon is always centered, and I would like the ability to move it to the right hand side of the field (button).

Second, I only now noticed that the dropdown menus are not dismissible, and that I need to click on the 'X' to collapse the menus. If I remember correctly, the Panel menu does have this additional feature, and this would be a desired ability, if possible.

Thanks for your continued assistance!

crispy68 · Post by **crispy68** » Tue Dec 27, 2022 2:09 am

For your first issue, try this. Insert a html box and add the following CSS between the <head> tags:

Code: Select all

<style>
#OverlayMenu1 .line{margin-right:20px;}
</style>

Now if you wanted to make a smaller hamburger button (for example: 50px by 50px button) but wanted the button to be on the right of the menu when it opens, you could add the following CSS code instead:

Code: Select all

<style>
#OverlayMenu1-overlay{margin-left:-200px;}
</style>

The margin number will need to be tweaked depending on the width of your burger button.

MGD4me · Post by **MGD4me** » Tue Dec 27, 2022 6:21 am

Thanks Ron!

I went with option #2:

Code: Select all

<style>
#OverlayMenu1-overlay{margin-left:-200px;}
</style>

The 200px setting pushes the dropdown menus nicely into the web page. I tried with a smaller margin, but frankly having a bit of web page visible around the menus with the 200px is much more pleasing, I find. And even with my smallest breakpoint of 360, it is very appealing .

Note, that the border I included around the hamburger button in the demo project was only added to highlight the issue I was trying to explain. In my final adaptation there is no border, just the icon by itself, which is now right where I wanted it!

So again, a huge thanks for the code.

Norm

www.wysiwygwebbuilder.com

SOLVED Overlay menu hamburger icon

SOLVED Overlay menu hamburger icon

Re: Overlay menu hamburger icon

Re: Overlay menu hamburger icon

Re: Overlay menu hamburger icon

Re: Overlay menu hamburger icon

Re: Overlay menu hamburger icon

Re: Overlay menu hamburger icon