Responsive Menu and other bits
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
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
Responsive Menu and other bits
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
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.
Re: Responsive Menu and other bits
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.
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.
Re: Responsive Menu and other bits
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
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
Re: Responsive Menu and other bits
The breakpoint of the menu is set to a strange value. I suggest to keep the default: 768 or use 480I duplicated the menu as I could not get the hamburger to show when the viewport was at 360, ie a mobile.
It looks like the JSSOR slideshow has a fixed size, which causes a scrollbarIf I view the 'home' page on a mobile phone, the header is scaled and the content following is squashed up.
I meant, to focus on the issue the project/pages should only contain the item that are relevant to the problem.Not sure what you mean about 'non-relevant content'
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.
Re: Responsive Menu and other bits
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?
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?
Re: Responsive Menu and other bits
Did you remove the duplicated menu and make sure all elements are inside the viewport?
Re: Responsive Menu and other bits
I'll check, thanks
Re: Responsive Menu and other bits
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.Breakpoint set to 480
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?It looks like the JSSOR slideshow has a fixed size, which causes a scrollbarIf I view the 'home' page on a mobile phone, the header is scaled and the content following is squashed up.
I meant, to focus on the issue the project/pages should only contain the item that are relevant to the problem.Not sure what you mean about 'non-relevant content'
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 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!
Re: Responsive Menu and other bits
As alternative to the JSSOR slider you can try the built-in slideshow or one of these responsive sliders:
http://www.wysiwygwebbuilder.com/bxslider.html
http://www.wysiwygwebbuilder.com/flexslider.html
http://www.wysiwygwebbuilder.com/elastislide.html
http://www.wysiwygwebbuilder.com/swiper.html
http://www.wysiwygwebbuilder.com/justifiedgallery.html
http://www.wysiwygwebbuilder.com/unitegallery.html
http://www.wysiwygwebbuilder.com/lightslider.html
http://www.wysiwygwebbuilder.com/fotorama.html
http://www.wysiwygwebbuilder.com/bxslider.html
http://www.wysiwygwebbuilder.com/flexslider.html
http://www.wysiwygwebbuilder.com/elastislide.html
http://www.wysiwygwebbuilder.com/swiper.html
http://www.wysiwygwebbuilder.com/justifiedgallery.html
http://www.wysiwygwebbuilder.com/unitegallery.html
http://www.wysiwygwebbuilder.com/lightslider.html
http://www.wysiwygwebbuilder.com/fotorama.html
Re: Responsive Menu and other bits
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
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
Re: Responsive Menu and other bits
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
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.
Re: Responsive Menu and other bits
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.
JSSOR is responsive, but not flexible.
Re: Responsive Menu and other bits
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.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?
What do I need to so to see the 'shrunken text'?
Re: Responsive Menu and other bits
POST DELETED BY OP
Last edited by Starb7 on Wed Jun 26, 2019 8:19 am, edited 3 times in total.
Re: Responsive Menu and other bits
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.
Adding a smaller breakpoint (320) may solve this.
Re: Responsive Menu and other bits
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!
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.
Re: Responsive Menu and other bits
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
IGNORE THAT - I can see they are the same as the LAYER option
Re: Responsive Menu and other bits
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
Now added the 320 px Breakpoint and making progress
Just to say a big thanks for your patience! Your help is appreciated.
Cheers
Re: Responsive Menu and other bits
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
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
Re: Responsive Menu and other bits
There are several menu that have this functionality.
For example, the built-in themeable menu.
Examples:
http://www.wysiwygwebbuilder.com/suppor ... orate.html
http://www.wysiwygwebbuilder.com/suppor ... owers.html
http://www.wysiwygwebbuilder.com/suppor ... asic6.html
For example, the built-in themeable menu.
Examples:
http://www.wysiwygwebbuilder.com/suppor ... orate.html
http://www.wysiwygwebbuilder.com/suppor ... owers.html
http://www.wysiwygwebbuilder.com/suppor ... asic6.html
Re: Responsive Menu and other bits
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
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
Re: Responsive Menu and other bits
You can set icons in the link properties.
In WB14 FontAwesome icons are not available for this menu.
In WB14 FontAwesome icons are not available for this menu.
Re: Responsive Menu and other bits
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.
Thanks.
Re: Responsive Menu and other bits
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
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
Re: Responsive Menu and other bits
You have have two different menus in different views.
Re: Responsive Menu and other bits
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.
Re: Responsive Menu and other bits
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?
Re: Responsive Menu and other bits
You will first have to unhide the object to move it.