Return to previous page

Styling mobile menu, 2 css codes don't do the tric

This topic has 6 replies, 2 voices, and was last updated 9 years, 12 months ago ago by Eva Kemp

Bookzs-Myra

Participant

December 1, 2014 at 16:07

Hi,
I’m trying to style the mobile menu but something is not working. See http://awesomescreenshot.com/0f33y12o77

The circled areas need to be blue, so I added:

.mobile-nav {
background-color: #00317a !important;
}

.et-mobile-menu li .open-child {
background-color: #00317a !important;
}

But after this, it just turns black again and when I look in the code (elements) I don’t see it. Besides this I would like to add a hover color to the red square but I don’t know how to….

This is all the code I have till so far:

#MOBILE#

.mobile-nav {
background-color: #00317a !important;
}

.et-mobile-menu li > a {
color: #FFFFFF;
background: #00317a !important;
border-top: 1px solid #01193D !important;
}

.et-mobile-menu > li > ul li {
background: #00317a !important;
}

.et-mobile-menu li .open-child {
background-color: #151515 !important;
}

.et-mobile-menu li .open-child:hover {
color: #FFF;
background-color: #fba500 !important;
}

.et-mobile-menu li > a:hover {
color: #FFF;
background-color: #fba500 !important;
}

.side-block .close-block {
background-color: #00317a !important;
}

.et-mobile-menu > li ul {
background: #00317a !important;
}

Thank you for your help!
Regards, Myra

Please, contact administrator
for this information.

#27480 Copied

5 Answers

Eva Kemp

Support staff

December 2, 2014 at 13:39

Hello,

Please provide us with your site url and FTP credentials.
Please remove all the code you’ve written for those changes in custom.css.

Thank you.
Regards,
Eva Kemp.

#27650 Copied

Bookzs-Myra

Participant

December 2, 2014 at 14:07

Hi Eva,

Thanks, I removed all those css changes, you can find the details in Private Content.
Regards, Myra

Please, contact administrator
for this information.

#27657 Copied
Eva Kemp

Support staff

December 2, 2014 at 17:49
Hello,

I’ve added this code into style.css of your child theme:
```
@media (max-width: 480px) {.mobile-nav, .side-block .close-block, .et-mobile-menu li > a, .et-mobile-menu li .open-child, .et-mobile-menu > li > ul li  {
background-color: #00317a !important;
}

.menu-icon i:hover:before { color: #00317a !important; }
}
```
Please check the site now.

Regards,
Eva Kemp.
#27717 Copied
Bookzs-Myra

Participant

December 3, 2014 at 11:45

Hello Eva,

Thank you, this looks great. I also added code for text color white and not underline the links.

Thank you!

#27820 Copied

Eva Kemp

Support staff

December 3, 2014 at 14:21

Hello,

You’re welcome.

Regards,
Eva Kemp.

#27857 Copied
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘Styling mobile menu, 2 css codes don't do the tric’' has been successfully resolved, and the topic is now closed for further responses

Styling mobile menu, 2 css codes don't do the tric

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection