How can I change the color of moblie main menu?

How can I change mobile menu bar’s background color?
I want to change it white or transparent.

And I want to change the icon’s color too..

Please let me know where to edit.

Thanks.

Hi

Try this custom css in theme panel > custom css:

@media (max-width: 767px) {
.td-icon-mobile:before, .td-icon-search:before{
color: red;
}
}
@media (max-width: 767px) {
.td-header-wrap .td-header-main-menu{
background-color: #ffffff !important;
}
}

You can change the color as you like. The result should be like here: http://screencast.com/t/mOM6crOZ

Thanks!

Hi Andrei,

I’m using a child team with Newspaper 6.4 and adding that code into my custom CSS doesn’t do anything, can you please advise?

Thanks
FP

Hi

Replace the previous css with this one:

@media (max-width: 767px) {
.td-header-wrap .td-header-menu-wrap-full, .td-header-wrap .td-header-menu-wrap, .td-header-wrap .td-header-main-menu {
background-color: #fff !important;
}
#td-top-mobile-toggle i, .header-search-wrap #td-header-search-button .td-icon-search {
color: #222 !important;
}
}

Let me know how it goes!

Thanks!

• This reply was modified 10 years by Andrei L..

Hello Andrei, i want to ask how can i change mobile icon menu from this

https://www.dropbox.com/s/m8tfxyudep06s24/1.png

to this

https://www.dropbox.com/s/dal1ml0lx90evt0/0.png

i use font Font Awesome 4 Menus plugin https://wordpress.org/plugins/font-awesome-4-menus/ for icons menu

Hi

You can change the mobile icon using this css in theme panel > custom css: http://screencast.com/t/Byv6tGVpklgv

.td-icon-mobile:before {
content: '\2630';
font-size: 35px;
}
You can increase or decrease the font size value if you want a different size for the icon.

Thanks!

Thank You, this works great 😀