Architect Pro – top header colour – responsive mode

[mariatannant]

Hi, I want to change the colour of the top header in responsive mode – currently it is set to almost black. I would like to lighten this.

Please can you tell me how I can do this as the Theme Options in Basic Settings do not seem to allow me this option.

https://jdbushdecorators.co.uk

Thanks

Maria

[mariatannant]

this is the color I want to use instead:

#827b7a

Thanks

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

.header-top { background-color: #827b7a !important;}

Regards,
Chris

[mariatannant]

Hi Chris,

Many thanks for this help. It works fine for responsive mode but the code overrides the ‘desktop opacity mode’ meaning the top banner picture is now masked by the top header background colour. Is there a way to have both options please.

Thanks

Maria

[Sonnal S Sinha]

Hi,

Kindly use this code there:

@media screen and (max-width:479px) {
.header-top { background-color: #827b7a !important;}
}

Regards,
Chris

[mariatannant]

Thanks for your help Chris, but this does not work. The ‘desktop opacity mode’ works but the dark responsive colour is still there and not #827b7a.

I am using Safari on a Macbook Pro.

Best

Maria

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

Regards,
Chris

[mariatannant]

Hi Chris,

I have put the screen shots here:
https://imgur.com/a/2WsEx

I want the desktop mode to remain transparent using the opacity feature and the responsive top header background to be #827b7a

Many thanks

Maria

[Sonnal S Sinha]

Hi,

This is working fine.

Have a look at:
https://imgur.com/a/TYzCy

Regards,
Chris

[mariatannant]

Hi Chris,

Yes it does work now, many many thanks. The only part which doesn’t work is when the responsive mode moves into tablet mode, then it turns very dark gain until it goes to desktop mode which if fine. I guess this is set by the @media screen and max-width value. Currently the code you gave me is set at:

@media screen and (max-width:479px) {
.header-top { background-color: #827b7a !important;}
}

Any help would be great.

Thanks

Maria

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (min-width:768px) and (max-width:1023px) {
.header-top { background-color: #827b7a !important;}
}

Regards,
Chris

[mariatannant]

Thanks Chris, I will take a look.

Best

Maria

[Sonnal S Sinha]

🙂

[Author]

Posts