Main menu transparency in small screens

Shapely
1

Hi!

Related to this topic: https://colorlibsupport.com/t/nav-bar-transparency-issue/

So you can check the site I am building here. I am having 3 problems with the main menu in small screens.

Problem 1: In my site the navbar is transparent and the menu font is white. In a small screen, when the menu is expanded, the background is transparent, so the menu is illegible.

Problem 2: How do I prevent the navbar from resizing into height 110px in a small screen?

Problem 3: How do I change the color of the 3 top-right lines that allow to show the menu? Right now they are light grey but they would need to be white.

Thanks!

2

Hi @navajo99,

I hope you are well today and thank you for your questions.

Problem 1: In my site the navbar is transparent and the menu font is white. In a small screen, when the menu is expanded, the background is transparent, so the menu is illegible.

To avoid this issue you can display the background color when the menu is expanded by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (max-width: 760px){
.container.nav-bar.nav-open {
    background: #212121;
}
}
Problem 2: How do I prevent the navbar from resizing into height 110px in a small screen?

I am not sure what do you mean by this so please describe it a bit more in detail?

Problem 3: How do I change the color of the 3 top-right lines that allow to show the menu? Right now they are light grey but they would need to be white.

Use the below CSS code to achieve this.

#page .module.widget-handle.mobile-toggle .fa {
    color: #fff;
    opacity: 1;
}

Best Regards,
Movin

3

Last question! (I can’t thank you enough for all the help you have provided me with!)

Do you know why, when i click on the three lines top right of the screen, I can only see the first item of the menu? Check it here!
Any idea why?

4
Do you know why, when i click on the three lines top right of the screen, I can only see the first item of the menu? Check it here!

This is happening because of the following CSS code added in the style.css file of child theme so to resolve the issue just remove the CSS code.

.nav-bar .module, .nav-bar .module-group {
    height: 55px;
}