Burger menu not visible

I Need Help
#1

Hello

I have a website in French and by copying it and translating it page by page I also have a website in English. I am faced with the following problem and I don’t know where it is fixed. In English the hamburger menu is perfectly readable because the colours are contrasted.

Capture d’écran 2021-04-18 à 12.38.54
Capture d’écran 2021-04-18 à 12.38.54330×601 18.5 KB

On the French website, the same menu is almost unreadable because the colours are not contrasted.

Capture d’écran 2021-04-18 à 12.36.46
Capture d’écran 2021-04-18 à 12.36.46333×589 17.1 KB

However, the English site is a copy of the French.
In short, where can I change this?

You can access my website here: www.lemoulinduboisset.com

Thank you for your help

#2

There is already a huge problem in the menu I have 2 times the same menu.
Have you cleared your browser’s cache?

#3

yes I did it

#4

Hi @Pat

A quick look shows you have the opacity set to 0.1 on the French site and 0.7 on the English one. I would suggest you have a typo here.

#5

Hello

I don’t know where I put this setting. Probably in a classroom. I can’t find my notes anymore. Can you remind me which class is used to change the appearance of the menu?

Thanks

#6

Hello @Pat I think it should be in “dropdown” or “dropdown-menu” classes…

#7

Sorry
I come back with my problem. I don’t remember what class I had modify to to have this color. Maybe .dropdown-menu but between my website in french and my website in english its’s the same parameters.
I need help please

#8

That’s the culprit:

Screenshot 2021-05-27 at 19.02.20
Screenshot 2021-05-27 at 19.02.201244×1474 224 KB
\

It’s like @Malachiman Pete already spotted correctly.

Once I set the opacity to 1 (like in the screenshot), the background color changes to white. Seems only to be needed at XS breakpoint. Background shows white when the width is above 575px.

Bit tough to tackle and change the code due to those nasty hover-dropdowns on mobile.

1 Like
#9

The problem that I don’t remember where I can set the opacity to 1 in blocs. In .dropdown-menu class it doesn’t work.

#10

The class I changed (see screenshot) is .dropdown:hover .dropdown-menu:hover. Not sure if you have that in your class editor somewhere. And you need to set the background color on the XS device.

#11

I can’t do it. I can’t change this class. Maybe a bug ,

#12

Do you have it in you class editor?

#13

No. I create the class each time.

#14

So I fixed it by copying the css style from my English site and putting it in the directory of my French site. It works and that’s good for me because I don’t have time to search at the moment. Our guest house business takes too much time. I will look again this winter when the tourists will be at home. Thank you

#15

Glad it works for you. :slight_smile:

#16

Hello,
I’m back with my problem that I had solved temporarily by putting the CSS style file from the English version to the French directory. Now that I’ve switched to bootstrap 5 and merged the JS and CSS with Blocs I can’t do that anymore.
So I still have a setting in the French version of my site that makes the menus unreadable in XS (and only in XS mode). Where can I change this setting and put the background in white or light grey?

Thank you for your help.

#17

Don’t merge. It creates countless issues (errors) and has no benefits.