Solved

Button Menu


Userlevel 1
Badge +2

Hi Everyone.

I’ve inherited a website built with Elementor.  The customer wanted a hamburger style menu on Desktop/Mobile/Tablet.  The developer used a plugin to make it look like this.  For various reasons, I don’t want to use this plugin.  Does anyone know how I could recreate this using standard widgets and E Pro.  I’ve tried a button with the dropdown menu and positioning to get them side by side then used a -ve margin to get the menu to sit on top of the button.   It’s messy and isn’t responsive on desktop, mobile or tablet!

Here’s what it looks like now: 

Here’s the best I can do with Elementor:

Any suggestions would be very gratefully received.

Benny

icon

Best answer by Benny Placido 25 June 2021, 16:05

View original

12 replies

Userlevel 6
Badge +3

Hi @Benny Placido welcome o our tribe

Can i suggest you to use an Icon widget with image that you want and insert a POff-Canvas Menu with Elementor Pro Popup Builder ?

 

 

Userlevel 1
Badge +2

That’s exactly what the developer used.  The plug-in is a pain and I want to get rid of it. Hence I was looking for a solution using E pro. 

Userlevel 6
Badge +3

That’s exactly what the developer used.  The plug-in is a pain and I want to get rid of it. Hence I was looking for a solution using E pro. 

i’m sorry but i do not understand :( 
no plugins have been used and everything is done only with elementor pro

Userlevel 1
Badge +2

I haven’t used p off canvas menus.  The previous builder used an off/canvas widget to create that menu. I will have to look into this with pop/ups. 

Userlevel 1
Badge +2

I’ve tried that method several ways but you end up in the same scenario which is trying to fit text and the nav menu on top of a button which simply doesn’t work.  I’ll keep trying but it seems like an utterly simple requirement, I can’t believe it’s so difficult.

 

Userlevel 6
Badge +3

I’ve tried that method several ways but you end up in the same scenario which is trying to fit text and the nav menu on top of a button which simply doesn’t work.  I’ll keep trying but it seems like an utterly simple requirement, I can’t believe it’s so difficult.

 

Maybe you're not clearly understanding the actions to perform because I've done this so many times and it's very simple and straightforward with no difficulty in handling the text.
You create an icon (you can put the image you prefer) and associate it with the opening of a pop (which you have previously created and inside which you will put the navigation menu of the site) and that's it.
Probably I'm not understanding your request but the video is very clear and it seems to me that the final result is what you want to achieve both in terms of aesthetics and implementation, that is without additional plugins.

Userlevel 1
Badge +2

The video isn’t that simple and I wasn’t able to replicate the button with icon, text, look and feel. I have never been comfortable with pop ups so I’ll try a different route. 

Userlevel 6
Badge +3

The video isn’t that simple and I wasn’t able to replicate the button with icon, text, look and feel. I have never been comfortable with pop ups so I’ll try a different route. 

ok thankyou for reply.

I think pop up are a great feature that solve a lot of problems and, in this case, is also the only (for me) solution.

I’m curious to know and discover what will be your different route so if you’ll want to share i’ll see with pleasure.

Bye 

Userlevel 6
Badge +4

Hello @Benny Placido have you find your answer yet? If so, please share it here so we can mark your answer as the best one and help others who may run into a similar issue.

Userlevel 1
Badge +2

The answer was to use the positioning function with percentages to position an icon with a button and text side by side.

Userlevel 1
Badge +2

And as was suggested, a popup for the sub-menu itself.

Userlevel 6
Badge +3

The answer was to use the positioning function with percentages to position an icon with a button and text side by side.

Thank you @Benny Placido to have shared the solution.

Reply