Page 1 of 1

Responsive menu - issues

Posted: Fri Oct 15, 2021 11:07 am
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

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 11:51 am
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

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 12:00 pm
by alan_sh

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 12:38 pm
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

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 12:45 pm
by alan_sh
Thank you

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 12:53 pm
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

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 1:18 pm
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.

Re: Responsive menu - issues

Posted: Fri Oct 15, 2021 1:26 pm
by alan_sh
Shame. It spoils the look and feel (in my opinion)

Thanks for the info anyway.

Alan

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 10:36 am
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

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 10:49 am
by Pablo
You can try adding this to the page HTML:

Code: Select all

<style>
#wb_ResponsiveMenu320 {
    word-break: break-word;
}
</style>

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 11:03 am
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)

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 12:05 pm
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

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 12:25 pm
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

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 2:08 pm
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>

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 2:40 pm
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)

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 2:47 pm
by crispy68
On its own between the style tags - does nothing
My code has to go in the <head> section.

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 5:23 pm
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>

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 5:55 pm
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.

Re: Responsive menu - issues

Posted: Wed Nov 03, 2021 6:03 pm
by DarioMartin
... Well well well... THANK YOU - now works perfectly across all break points!!

Many many thanks :D