Responsive menu - issues

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
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Responsive menu - issues

Post by alan_sh »

I have a responsive menu which I really like to use. But it's overlapping with other tems in my flex grid.

This is what it looks like at full screen - this is OK.
Image

When I reduce the screen size to just below the RWD value, it looks like this: note the large purple bar that is still there. This is the issue.
Image

Then, on reducing it further, you can see it's layering over the top of other objects. If the large purple bar wasn't there, I wouldn't have this issue. Can anyone suggest a solution (and making the background alpha zero introduces other issues)
Image

Any help appreciated.

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

Re: Responsive menu - issues

Post by Pablo »

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Responsive menu - issues

Post by alan_sh »

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

Re: Responsive menu - issues

Post by Pablo »

The reason why it overlaps is because the size of the menu is fixed (flex-grow and flex-shrink are 0).
To make the menu flexible you can set flex-grow/flex-shrink to 1

Related tutorial:
https://www.wysiwygwebbuilder.com/flexbox.html
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Responsive menu - issues

Post by alan_sh »

Thank you
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Responsive menu - issues

Post by alan_sh »

Is there any way of getting rid of the bar that goes full width across the screen when we just have the hamburger menu?

Image

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

Re: Responsive menu - issues

Post by Pablo »

I don't think that is possible because the toggle button is the parent for the dropdown menu. This means that the drop down cannot be wider than its parent (because this menu uses CSS only)
So, that is why the color extends to the full width.
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Responsive menu - issues

Post by alan_sh »

Shame. It spoils the look and feel (in my opinion)

Thanks for the info anyway.

Alan
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

Good morning, please excuse me tagging onto this thread, but I have come up against an issue in a CSS Responsive Menu that I am not sure how to resolve.

I have some long(ish) text in my Responsive Menu, so I am using the <br> tag to break it across two lines. for example "Shop Now!<br>Buy our products online" which on the 1250 and 768 break point on all browsers (tested on Edge / Chrome / Firefox) displays perfectly as
Shop Now!
Buy our products online


But on the 320px breakpòint, where responsive menu changes to a Hamburger menu, it displays as Shop Now!Buy our products online and goes off the edge of the menu.

Any thoughts? Seeing <br> working for the other two breakpoints leads me to believe it should work for 320 ... but doesn't!!

see https://www.emporium-enchantedforest.com for details
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive menu - issues

Post by Pablo »

You can try adding this to the page HTML:

Code: Select all

<style>
#wb_ResponsiveMenu320 {
    word-break: break-word;
}
</style>
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

... Better ... in that on the Spanish Version (I have a dual language site) "¡Compra ahora!<br>Compra nuestros productos online" now displays as
¡Compra ahora!Compra nuestros product
os online


So in that respect it doesn't run off the edge of the menu, but in 320 breakpoint (and only 320 breakpoint) the <br> tag is being ignored.

EDIT: Meant to add that <br> is still being ignored in both 320 menus (English and Spanish). Whereas using the code supplied causes the longer Spanish text to break and stay within menu, the shorter English version stubbornly remains as ShopNow!Buy our products online

EDIT 2: Have also tried using <wbr> tag but that is just translated and displayed as "ShopNow!&lt;wbr&gt;Buy our products online" in all breakpoints. <br> is recognised as a valid tag, but ignored in 320 (Hamburger menu)
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Responsive menu - issues

Post by Pablo »

The menu was not really designed to include <br>, so the generated style do not take this into account.
However, <br> will be insert ed"AS IS". So, you should be able to make it work by fine-tuning the CSS. Either by adding word-break or word-wrap
https://www.w3schools.com/cssref/css3_pr_word-break.asp
https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

Thanks for that - have tried both but Hamburger type menu resolutely refuses to recognise <br>
I must stress though that at 768 and 1250, the <br> is recognised in the menu and inserts a new line at point specified - it is ONLY when menu breaks to hamburger at 320px does <br> cease to be recognised
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive menu - issues

Post by crispy68 »

Try adding the following CSS to a code object (or in the head section of page html):

Code: Select all

<style>
#wb_EEF_ResponsiveMenu320ES{display:inline-block;}
</style>
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

On its own between the style tags - does nothing - not even breaking the long (Spanish) line. In conjunction with word-break (i.e. display: inline-block; and word-break: break-word;, causes long Spanish line to break at same point as last message, but "<br>" tag still being completely ignored in Hamburger menu (320 break point)
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive menu - issues

Post by crispy68 »

On its own between the style tags - does nothing
My code has to go in the <head> section.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

Yes - the <style> tags are between the <head> </head> tags

Heres the last few lines of the <head> page HTML

Code: Select all

<script>
$(document).ready(function()
{
   $("#wb_EEF_ResponsiveMenuES ul li a").click(function(event)
   {
      $("#wb_EEF_ResponsiveMenuES input").prop("checked", false);
   });
   $("#wb_EEF_ResponsiveMenu320ES ul li a").click(function(event)
   {
      $("#wb_EEF_ResponsiveMenu320ES input").prop("checked", false);
   });
   $('#wb_ImageMap_SM_Full map').imageMapResize();
   $('#wb_ImageMap_SM_320 map').imageMapResize();
});
</script>
<style>
#wb_EEF_ResponsiveMenu320ES {
    display: inline-block;
    word-break: break-word;
}
</style>
</head>
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Responsive menu - issues

Post by crispy68 »

My bad.

I left some of the code out....duh (slaps head homer style).

Here is the updated code:

Code: Select all

<style>
#wb_EEF_ResponsiveMenu320ES ul li a br{display:inline-block;}
</style>
You don't need the word break code.
DarioMartin
 
 
Posts: 21
Joined: Mon Feb 24, 2020 8:37 pm

Re: Responsive menu - issues

Post by DarioMartin »

... Well well well... THANK YOU - now works perfectly across all break points!!

Many many thanks :D
Post Reply