How can I position a menu as in the picture?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
PampoenKoekie
 
 
Posts: 5
Joined: Wed Jan 22, 2025 7:01 am

How can I position a menu as in the picture?

Post by PampoenKoekie »

Gooday!
I was wondering how I can achieve a similar effect as in the picture where the menu is adjusted in-between. I usually would have done this by setting the object's margin to a negative number such as -40px to move it upwards. Im trying to put in in a grid layout so it would be better for Responsive design, but it cuts off.

Say for instance I have a Grid layout for the top part. Then a second Grid layout for the image carousel or slider. As in the picture, I want to add the menu between them. Does anyone know how I could solve this? Would love to hear your ideas and thank you.

https://tinypic.host/image/Menu.2sPNL4

Image
User avatar
Pablo
 
Posts: 23239
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: How can I position a menu as in the picture?

Post by Pablo »

Did you try to use a negative margin on the layout grid where the menu is part of?

Or else you can use a divider which is half the height of the layout grid to make it look like the menu is part of the upper grid.

As demonstrated here with cards:
https://wysiwygwebbuilder.com/support/w ... tblog.html
PampoenKoekie
 
 
Posts: 5
Joined: Wed Jan 22, 2025 7:01 am

Re: How can I position a menu as in the picture?

Post by PampoenKoekie »

Thank you for your prompt response, Pablo. Just also have to say thanks for this great software, I have been enjoying it tremendously.
Great work you achieved, you can be proud.

Back to the question. Thank you for your advice and time, I appreciate it.
I will try the divider option next thanks! I have gotten so used to my way of doing it via code.
My usual way is using a Div with a background colour for the top part. Then another Div below that one which is another colour and contains the menu. Then I set the menu margin to -40px for instance and it moves up and doesn't get clipped by the div itself. If I do that in WYSIWYG builder it moves the menu up as expected but it clips it, it hides it when it goes out of bounds of that DIV. Is there maybe a setting so it doesn't clip and just moves the menu itself upward with everything being shown? If this doesn't make sense, let me know, I would be willing to share a video.

I have set the margin of the Div (Grid container) itself too to a negative margin and moves the background colour with it, so it works but necessarily as I want in this specific case.

Would it be possible to implement a menu option into the "SECTION" object available in the toolbox? It would be amazing if there is an option to add a menu inside the "Section"...

Thank you once again.
Keep well
User avatar
Pablo
 
Posts: 23239
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: How can I position a menu as in the picture?

Post by Pablo »

It may work if you add overflow:visible to the layout grid via custom HTML.
But I personal would use a divider to keep it simple.

You cannot add a menu to a section. A section is basically a card which is a lightweight self-contained object.
PampoenKoekie
 
 
Posts: 5
Joined: Wed Jan 22, 2025 7:01 am

Re: How can I position a menu as in the picture?

Post by PampoenKoekie »

Thank you very much, the divider works well. I will also test the overflow being set to visible. I was looking for a setting like that, maybe in the future it could be added.Appreciate your time thank you!

All the best and keep well
Post Reply