Color of the menu bar on smartphone

[Sauce-Samourai]

Hello,

First of all, I would like to thank you for this amazing wordpress theme, I almost finished the theme’s configuration but I have some problems that I am not able to resolve. But don’t worry, I am going to create a ticket for each of theme.

My first problem is about the color of the header :

When I am on the desktop’s version of the website, with a normal screen, the configuration is perfect, I have a transparent menu.

But on the mobile/tablette’s version of the website, the menu bar is black although I would like it white.

How can I proceed ?

I tried to change “transparent main menu color” in black, but it’s transparent until I didn’t scroll on the bottom. After, the background color of the menu bar is white, not transparent while it’s transparent when I choose “transparent main menu color” in white.

Also, why the icon menu on the smartphone is red ? I checked on “styling option” and nothing is configured as “red”.

Thank you in advance for your help.

Regards.

 

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, just add this to style.css of child theme

COPY CODE

@media (max-width: 991px) {
div#undefined-sticky-wrapper {
    background: white;
}
button.navbar-toggle {
    background: #FF8038 !important;
    color: black !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Sauce-Samourai]

Thank you for your help Laura.
As the text’s color was white we can’t see it now, I need to change it in black and put the border in orange.
I tried with the following css code, but it still doesn’t work :

@media (max-width: 991px) {
div#undefined-sticky-wrapper {
background: white;
color: black !important;
border-color: #FF8038 !important;

}
button.navbar-toggle {
background: #FF8038 !important;
color: white !important;
}
}

[Laura]

Hello, please try adding the following

COPY CODE

ul#menu-kleonavmenu a {
    color: #FF8038;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Sauce-Samourai]

Hello Laura,

Thanks you for your answer but I still have a problem. Actually, I don’t want the texte color in FF8038 but I would like it “white” for the desktop version and black for the mobile version. Also, I would like the border in FF8038 but only for the mobile version. With your css code, the FF8038 color is on for the desktop et mobile version.

Thanks you in advance

[Laura]

Hello, try the following

COPY CODE

ul#menu-kleonavmenu a {
    color: #FFFFFF !important;
}
@media (max-width: 991px) {
ul#menu-kleonavmenu a {
    color: #000000 !important;
}
}

What border do you mean?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[route1digital]

Hi, I tried using the code it has changed the background but The menu fonts seem white and not visible. for the main menu, on the smart phone, I want a white background with Black fonts for menu items

[Laura]

Hello, can you share access so i can check it out? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts