Changing the menu color

Tagged: Menu color on mobiles & mobile vertical display issue

This topic has 7 replies, 3 voices, and was last updated 5 years, 9 months ago by Grace Themes.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 3, 2018 at 1:18 pm #8991

Bruno Waser
Participant

How can I change the color for the menu for mobile devices only?
Please don’t tell me: “Send the login data for my website”
If that’s not possible for me to change, then this theme goes to waste. Friendly greetings

May 4, 2018 at 9:39 am #9016
Grace Themes
Member
Hi Bruno,

To change the menu color in mobile devices

Go to Appearance -> Editor -> style.css file
add below css code and change the color code as per your need.
```
@media screen and (max-width:767px) 
{
.header-nav ul li a, .header-nav ul li.current_page_item ul li a { color:#FF0000 !important; }
.header-nav ul li a:hover, .header-nav ul li.current_page_item a, .header-nav ul li.current_page_item ul li a:hover, .header-nav ul li.current-menu-ancestor a.parent { color:#00FF00 !important; }
}
```
Please do this change and let me know your feedback.

Regards
Grace Themes
May 5, 2018 at 1:29 pm #9026

Bruno Waser
Participant

Thank you. Worked perfectly.

Regards
Bruno Waser

May 6, 2018 at 4:17 am #9027

Grace Themes
Member

Hi Bruno,

You are most welcome..!

Regards
Grace Themes

August 27, 2018 at 10:49 am #10943

Holger Engel
Participant

Hi, I have the same issue that the Menu color on mobile devices is different from the PC version.
With the tip above I could partially fix it:I could change the font colors to make it at leasdt legible.
However, how can I change the Menue background color to make it look as on the PC version?

A second issue: I added a page title & sub-title on my starting page. On mobile devices in horizontal view, the body text of the pages is now starting below the mainpage header and is partially not readable. How to fix?

Thx in advance!

Holger

August 28, 2018 at 6:28 am #10949
Grace Themes
Member
Hi Holger,

To change the background color of menubar in mobile devices
Go to Appearance -> Theme Options -> Basic Settings -> Background Colors -> Select background color for toggle menu

To change the menu background color in mobile version
Go to Appearance -> Editor -> style.css file
add below css code and change the color code as per your need.
```
@media screen and (max-width:767px) 
{
.header-nav ul li { background-color:#000000 !important; }
}
```
Second issue: Please send your website URL and some screenshot where the problem is getting so we can check and assist you.

Regards
Grace Themes
August 30, 2018 at 4:23 pm #10982

Holger Engel
Participant

Thanks – this works!
Will send you the screenshot of the second issue to oyur support E-Mail.
Thx,
Holger

August 31, 2018 at 7:01 am #10998
Grace Themes
Member
Hi,

1. To solve the issue, add below css code in
Appearance -> Editor -> style.css file
```
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.innerbanner { min-height:140px; }
}
```
Regards
Grace Themes
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

WordPress Website Templates

Find Professional WordPress themes Easy and Simple to Setup

Changing the menu color

Featured Theme

Showcase

Need help?