Responsive menu - issues

[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.


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.


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)


Any help appreciated.

Alan

[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]

Here you are:

https://www.dropbox.com/s/a91qgv293whl5 ... 1.zip?dl=1

regards

Alan

[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]

Thank you

[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?



Alan

[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]

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

Thanks for the info anyway.

Alan

[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

[Pablo]

You can try adding this to the page HTML:

Code: Select all

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

[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)

[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]

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

[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]

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)

[crispy68]

On its own between the style tags - does nothing

My code has to go in the <head> section.

[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>

[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]

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

Many many thanks