Responsive Menu and other bits

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
Post Reply
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Responsive Menu and other bits

Post by Starb7 »

Hi Pablo and all

Struggling with a couple of items on a site. This is based on template and I have altered and edited to get what I wanted. I have 3 main issues (with some related issues) that I cannot resolve.

1. I have 4 pages on the site - Home being the normal one and About, Gallery and Contact being CLONES of the main page with edits to show just appropriate content. This appears to work but; a) the Menu is missing so can click to go back and b) the first Layout grid appears to slide up to the top (so hides text). If you look on 'About' you can see that the first number is 3 (partially) so why has this slid up? I have set the top padding to 100 so the pic is in the right place on the home page so why isn't the text showing in the same 'start point' when the padding is the same.

2. I have set a breakpoint at 360 for mobile views but when you look at it on a mobile, the header is huge and the body is tiny - are Pages Headers responsive? How do I get all to show at the same with and where has the menu gone?

3. Menus - when I reduce the size of a desktop page, I see the 'Responsive' menu Hamburger appears but if I view this on a real mobile there is no menu! I would like the Hamburger to appear when on a small viewport and mobile so how do I get it to show and how to I get to show in the right of the top panel (I can only get it to appear in the left side.

I have purposely removed the 360 view menu from 'Gallery' page and when selected, that one does show the main menu in its header. It seems that if I have a 360 view menu (which I have set to be hidden in full viewport) the main menu is being ignored, eg About and Contact have neither menus in full desktop mode.

Hope you can help and point me in the right direction?

TIA

Paul
Last edited by Starb7 on Wed Jun 26, 2019 8:16 am, edited 1 time in total.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

You have duplicated the menu in the page header, however the 'hidden' menu is outside the viewport of the breakpoint so this affects the page width and this causes a scrollbar.
Why did you duplicate the responsive menu? The purpose of this menu is to reuse it in breakpoint, where it should switch to mobile mode based on the breakpoint.

To help you with the other issue, I need more details.
Where exactly do I need to look?
Which object IDs are relevant?

Tip: please focus at one issue at a time.
Also when you share your project please remove all non-relevant content. So, it's immediately clear for me where to look. This will save us both a lot of time.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo

I duplicated the menu as I could not get the hamburger to show when the viewport was at 360, ie a mobile. I'll remove the added one and try again. To tackle these one by one, can we start with that? ...

I have removed the extra menus and now uploaded again (entire site / all files) but on a desktop there is still no menu showing for the 'about' and 'contact' pages which are clones of the main page, but oddly, the 'Gallery' page does show the menu.

If I view the 'home' page on a mobile phone, the header is scaled and the content following is squashed up. The Hamburger shows but it is tiny. If I view the 'home' page on a desktop and shrink the window up that seems to work although the menu background colour doesn't cover the whole menu text.

If we can get this sorted, I'll move on to the other items if that's OK?

Not sure what you mean about 'non-relevant content' - all content is what has been uploaded by WWB.

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

Re: Responsive Menu and other bits

Post by Pablo »

I duplicated the menu as I could not get the hamburger to show when the viewport was at 360, ie a mobile.
The breakpoint of the menu is set to a strange value. I suggest to keep the default: 768 or use 480
If I view the 'home' page on a mobile phone, the header is scaled and the content following is squashed up.
It looks like the JSSOR slideshow has a fixed size, which causes a scrollbar
Not sure what you mean about 'non-relevant content'
I meant, to focus on the issue the project/pages should only contain the item that are relevant to the problem.
If I have to go through all pages and all settings of all object then it may take me hours to figure out what is wrong.
So, if you run into a problem then create a small demo project with only the items that do not work.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Thanks Pablo, I'll have a good look at this as soon as I can and as always, much appreciated. Thanks

P.S. any thoughts on why the menu doesn't show on two of the cloned pages? Perhaps if I fix the main page first then re-clone would be the best option?
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

Did you remove the duplicated menu and make sure all elements are inside the viewport?
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

I'll check, thanks
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Pablo wrote: Mon Jun 24, 2019 7:54 pm
I duplicated the menu as I could not get the hamburger to show when the viewport was at 360, ie a mobile.
The breakpoint of the menu is set to a strange value. I suggest to keep the default: 768 or use 480
Breakpoint set to 480
If I view the 'home' page on a mobile phone, the header is scaled and the content following is squashed up.
It looks like the JSSOR slideshow has a fixed size, which causes a scrollbar
Where do you set the JSSOR slider size? I have tried to use the 'Responsive' menu but all other than '(None)' mess the page up. I can't see a 'size/width' option. If this is a non-usable 'RWD' extension, can you recommend on that is that offers a similar 'slider' feature?
Not sure what you mean about 'non-relevant content'
I meant, to focus on the issue the project/pages should only contain the item that are relevant to the problem.
If I have to go through all pages and all settings of all object then it may take me hours to figure out what is wrong.
So, if you run into a problem then create a small demo project with only the items that do not work.
I have deleted all pages now other than the main page and re-uploaded that (removing all files on the ftp first) so now only the main page is there.

I can't see any object outside of the viewport (now set at 480 - is 768 OK for mobile devices?) so shouldn't be an issue now.

Page still not working on mobiles so if I can get past this, I'll look at cloning for the other pages, etc.

As always, TIA!
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo

You said "It looks like the JSSOR slideshow has a fixed size, which causes a scrollbar" and my follow up question was "Where do you set the JSSOR slider size? I have tried to use the 'Responsive' menu but all other than '(None)' mess the page up. I can't see a 'size/width' option. If this is a non-usable 'RWD' extension, can you recommend on that is that offers a similar 'slider' feature?"

You answered with alternatives so I am right in assuming you can't change the site and the JSSOR is not responsive?

Cheers
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo

OK, I have tried several of the sliders and get similar results, ie look OK on the desktop but on mobile the text is shrunk - what am I doing wrong?

At a loss on how to get this (what should be simple) page to work on mobile so any clues as to why it won't would be appreciated.

Thanks
Last edited by Starb7 on Wed Jun 26, 2019 8:17 am, edited 1 time in total.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

The JSSOR slideshow was released before WWB supported layout grids, so it was not designed to be used in a flexible layout.
JSSOR is responsive, but not flexible.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

OK, I have tried several of the sliders and get similar results, ie look OK on the desktop but on mobile the text is shrunk - what am I doing wrong?
I do not see any major issues. The only issue I see is that the menu is very small in the breakpoint, so there is no space for it to expand.

What do I need to so to see the 'shrunken text'?
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

POST DELETED BY OP
Last edited by Starb7 on Wed Jun 26, 2019 8:19 am, edited 3 times in total.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

This is most likely because the fixed content (in your case the page header) is too wide.
Adding a smaller breakpoint (320) may solve this.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

But doesn't that contradict what you said earlier, ie "The breakpoint of the menu is set to a strange value. I suggest to keep the default: 768 or use 480"?

So a breakpoint of 768 or 480 isn't really suitable for mobile phones?

Confused! :?
Last edited by Starb7 on Wed Jun 26, 2019 5:24 pm, edited 1 time in total.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

From the original post, I asked about the hiding text... Hands Up and apologies time! I hadn't read the info correctly and see that the default mode for the header was fixed and you need to add a top padding for the next element, etc. I have decided to make this a 'floating' header so it just moves up. While looking at the setting for that, I see an 'Overflow' but that's not mentioned in the help pages (or the Alignment) so could you confirm what those options do? Cheers

IGNORE THAT - I can see they are the same as the LAYER option :)
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo

Now added the 320 px Breakpoint and making progress :)

Just to say a big thanks for your patience! Your help is appreciated.

Cheers
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo

Still on menus and have spent quite a lot of time testing. Some may work for me but I was trying to emulate something like the one seen here http://www.clumberkitchens.co.uk This is a 'normal' menu until the window is closed up (or viewed on mobile) in which case it changes to a Hamburger with drop down selections. Just in case I have missed it, does any of the menu's you suggest do something like this? Cheers
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Hi Pablo,

Thanks for these samples but when in BootStrap mode (to get the hamburger) how do I get the ICONS, specifically the FontAwsome icons to show? I am trying to emulate the one I showed you but this one doesn't seem to have the capability.

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

Re: Responsive Menu and other bits

Post by Pablo »

You can set icons in the link properties.
In WB14 FontAwesome icons are not available for this menu.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Ah, so it's no good if I am trying to emulate the one I wanted then. Is there one like that, that does support FontAwsome? I have tried lots of menus and their various options but not getting very far :(

Thanks.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

I can use the 'Responsive Menu' but back to colours and backgrounds when in Hamburger mode.

I think this is where I was at when I have two menus, one hidden in full screen and one hidden in RWD view so may revisit that option.

When in RWD view, I can make that one have different colours and styles, etc. Is there any issue in doing that that may cause problems with rendering, ie have two menus?

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

Re: Responsive Menu and other bits

Post by Pablo »

You have have two different menus in different views.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

Yes, but is that a problem with rendering? It gets around the problem I have if this is OK. I realise I have two menus to maintain but that's not a big issue.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Responsive Menu and other bits

Post by Starb7 »

How do I move a Hidden object without unhiding it, ie is there a key-combo like Ctrl and click (tried it) to do this?
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu and other bits

Post by Pablo »

You will first have to unhide the object to move it.
Post Reply