Responsive Grid, Menu, ETC

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Responsive Grid, Menu, ETC

Post by 360webfirm » Sun Mar 04, 2018 11:27 am

Hello All,

I use to use this program a long time ago and have since just came back to it.

I have a few questions.

1. I have used a few templates and I am having some difficulties with the responsiveness for the menu. This is one I am using http://www.wysiwygwebbuilder.com/suppor ... onuts.html. The issue with this template is that the menu is not responsive, for me anyways. I wanted to add a layout grid on the top header and cannot seem to get it there because there is already one under it. Is there a way to shift any layer down or add on on top of any layer? It seems that the layers stay and its not possible to add another on top of an existing layer. Its also hard to place items inside of these layers without using some type of placeholder. Any easy way to deal with layers such as FlexBox, Grids?

2. The program is great and has a lot of potential, but I am having difficulties finding simple ways for making a responsive menu work. Any ideas or examples, templates that utilize a responsive menu I could see as examples on how they were down?

Thanks,

Steve

User avatar
Pablo
 
Posts: 13908
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Grid, Menu, ETC

Post by Pablo » Sun Mar 04, 2018 12:03 pm


360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Tue Mar 06, 2018 10:35 pm

I am not sure where the arrange tool is, I see Move to front, Move to back, but not move forward.

Right now I am using a Header layer and I have it set on several screen sizes per break points. I added a FlexBox container and it went to the bottom of the header which I wanted it to. The issue I am now experiencing is that when I add content to the FlexBox, it allows me to add content, but it does not show when viewing in browser.

I wanted to make the lower half of my website easy by using FlexBox which will automatically resize in all screen sixes. However, I cannot see the content when I view it.

I have added a Layout grid and Flexbox UNDER my Header and it allows me to add content, but nothing shows in browser viewing... What the heck!

I seem to be wasting so much time trying to get this program to work..

User avatar
BaconFries
 
 
Posts: 4166
Joined: Thu Aug 16, 2007 7:32 pm

Re: Responsive Grid, Menu, ETC

Post by BaconFries » Tue Mar 06, 2018 11:26 pm

Again sounds like criticism to me by saying 'I seem to be wasting so much time' and 'this program'
I seem to be wasting so much time trying to get this program to work..
"How do I move a Layout Grid up or down the page?
You can use the Arrange tools (Move forward/ Move backwards) to rearrange Layout Grid.
The arrange tools are available in the Object Manager, Menus/Ribbon and in the context menu (right click). You can also use the '+' and '-' keys on the numeric keypad.
You can also use this to re-arrange the objects inside the grid."

User avatar
Pablo
 
Posts: 13908
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Grid, Menu, ETC

Post by Pablo » Wed Mar 07, 2018 6:49 am

Without seeing what you have done it will be difficult to help you.
Please share your project file.

360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Wed Mar 07, 2018 6:22 pm

I used a page header for my top and wanted to keep the header docked so the menu will show up when scrolling down. I added a layer under the header and all is good. The issue is that when I view, the content on the layer actually gets shown higher than the project like the layer is going right to top. I have also tried the arrange tools without success.

What I would like to do is use some type of layer for top header where I can have the header always shown and it be 100% width, then add content under this that does not get pushed up. What can you suggest for this? I have done lots of reading on layers and have tried a lot of things. I get it working, but my middle content for some reason gets pushed up when viewing in browser.

Thanks as always for your assistance.

Steve

User avatar
Pablo
 
Posts: 13908
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Grid, Menu, ETC

Post by Pablo » Wed Mar 07, 2018 6:40 pm

The issue is that when I view, the content on the layer actually gets shown higher than the project like the layer is going right to top.
This is expected behavior. When you 'fix' an HTML element then it will be taken out of the document flow. So all objects that come after it will start at the top of the page and they may be behind the header.
A common solution for this is to add a margin to the first element after the header, so it starts with an offset.

360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Wed Mar 07, 2018 6:42 pm

Thanks once again for your help. I will try that.

Steve

User avatar
BaconFries
 
 
Posts: 4166
Joined: Thu Aug 16, 2007 7:32 pm

Re: Responsive Grid, Menu, ETC

Post by BaconFries » Wed Mar 07, 2018 6:43 pm

You can use one of the following methods:
1) Insert a page header set it to 'fixed' then place the menu or object on the header.
2) Use a sticky layer
3)Use a docking layer.

360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Wed Mar 07, 2018 6:47 pm

Yeah, that is what I did and then set the margin on my next layer to 50 top so it then shows perfect within the browser and the top header stays there for the menu.

This finally is coming together because of all your help and Pablo support.

Regards,

Steve

joebarkerorlando
 
 
Posts: 7
Joined: Fri Feb 09, 2018 12:44 pm

Re: Responsive Grid, Menu, ETC

Post by joebarkerorlando » Tue Mar 13, 2018 11:23 am

Where is the Flexbox? It is not listed in the tool box.

360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Tue Mar 13, 2018 11:25 am

Insert - Layout - Flexbox container

User avatar
Pablo
 
Posts: 13908
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Grid, Menu, ETC

Post by Pablo » Tue Mar 13, 2018 11:26 am

Maye you have enabled 'Easy Mode'? This will hide advanced features.

360webfirm
 
 
Posts: 34
Joined: Sun Mar 04, 2018 11:15 am

Re: Responsive Grid, Menu, ETC

Post by 360webfirm » Tue Mar 13, 2018 11:27 am

I just have the default set as I installed it.

Do you need a screen shot? Let me know

joebarkerorlando
 
 
Posts: 7
Joined: Fri Feb 09, 2018 12:44 pm

Re: Responsive Grid, Menu, ETC

Post by joebarkerorlando » Tue Mar 13, 2018 11:28 am

Thank you! Never thought of that.

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests