Restaurant Pro mobile header background color

[Customer]

Hi:

I am using Restaurant Pro and wonder how to change the header background color for mobile? Tried changing styles.css and Theme Options but did not work.

Thanks

Henry

[Sonnal S Sinha]

Hi Henry,

Kindly show us your website URL.

Regards,
Brad

[Customer]

Hi Brad:

Please find the following URL http://aarondentistry.leafcom.org/. This theme looks great but the following issues need to be resolved:

1. How to change header background on mobile? The default header background on mobile is grey.

2. The logo width issue: Logo looks good on laptop, but very short in width on mobile, changed the following line in .CSS to width: 100%, now logo looks good on mobile, but menu items pushed to 2nd line as shown URL.
.header .header-inner .logo{float:left; margin-top:20px; margin-left:180px; margin-right:50px; width:100%;}

It would be great if you can help.

Thanks

[Sonnal S Sinha]

Hi Henry,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

.header .header-inner{background:#000000 !important;}

Regards,
Brad

[Sonnal S Sinha]

Hi Henry,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:768px){
.header .header-inner{background:#000000 !important;}
}

Regards,
Brad

[Customer]

HI Brad:

Thanks for the information. The mobile header background color is now working well.

But the mobile logo is very short, believe affected by the following line in CSS.

.header .header-inner .logo{float:left; margin-top:20px; margin-left:20px; margin-right:50px; width:22%;}

[Sonnal S Sinha]

Kindly add this code in custom css box:

@media screen and (max-width:768px){
.header .header-inner .logo{width:auto !important;}
}

Regards,
Brad

[Customer]

Hi Brad:

Thanks, it works, appreciated. Meanwhile. A new issue:

How to change mobile header background color to black while keeping the content background white?

Thanks

[Sonnal S Sinha]

Hi,

Header color on mobile is currently black. Do you want to change the navigation background color to black on mobile?

Regards,
Brad

[Customer]

Hi Brad:

The navigation background color is okay. The issue is for mobile header color above the navigation bar: Currently the mobile header black color is achieved by the following code:

@media screen and (max-width: 768px) {
body {background-color: #000000;}
}

The issue is – it also changed the content background color to black. Please visit page Practice on mobile to see this issue. The question is: how to change the header background color to black while keeping content background color as white?

Thanks

Henry

[Sonnal S Sinha]

Hi Henry,

Kindly remove the body background color code and add this code in custom css box:

@media screen and (max-width: 768px) {
.header{background:#000000 !important;}
}

Regards,
Brad

[Author]

Posts