Menu dropdown color on mobile devices

Hello,

To change the active and normal color of background of dropdown menu on small devices, please go to Dashboard -> Appearance -> Customize -> Theme Options -> Advanced Options.
and add the below given code

button:hover {
    background-color: #3f4a56;
}
@media only screen and (max-width: 767px){
.dropdown-toggle {
    background: #f94877;
}
}

Hope this helps.

If you want more dedicated and swift support on the theme, please visit the theme’s official support forum where the theme’s official support team are stand by to answer each and every one of your questions.
https://themepalace.com/forum/education-hub/

Best regards.
Have a good week ahead.

Hi,

Thanks for your quick response. I did as you suggested. When viewing on a mobile device, the menu header is the correct color when the page is initially loaded and when you hover over the menu. But the dropdown menu still isn’t changing colors. I thought maybe it was lag time on the server, but it has been over an hour and it still hasn’t changed. Here’s the CSS style I inserted:
.menu-toggle {
background-color: #002d72;
}
button:hover,
input[type=”button”]:hover,
input[type=”reset”]:hover,
input[type=”submit”]:hover {
background-color: #002d72;
}
@media only screen and (max-width: 767px){
.dropdown-toggle {
background: #002d72;
}
}

Any thoughts? Thank you.

Hello,

Please remove the CSS you have inserted and only paste the CSS We have provided to you.
We warn you that it does not change the container color of the menu just the color of the plus(+) sign which opens the dropdown menu.

Hope it helps,
Best regards.

Hi,

Maybe I’m asking the wrong question. I’m interested in the background of the dropdown menu choices changing color. Maybe this is the “container”? For example, my navigation bar has HOME,ABOUT, SEARCH, HELP, CONTACT. The mobile device reads menu in the correct color, but when clicking on the dropdown the background color behind HOME, ABOUT, SEARCH, HELP, CONTACT are not the same color. Can this color be changed?

Thank you.

Hello,

If you want to change the container color of the dropdown menu please add the below given css to custom css option on theme as mentioned above.

Also remember the above given CSS changes the color of the plus( + ) sign beside on the drop down menu so if you do not want that you can remove it.

@media only screen and (max-width: 767px)
.main-navigation ul {
    background: #00b9eb none repeat scroll 0 0;
}

@media only screen and (max-width: 767px)
.main-navigation ul.sub-menu.toggled-on {
     background: #00b9eb;
}

Hope it helps.
Best regards