How to change the header colour that appears in mobile view only

[OnePort365]

Hello

Can you please show me how to change the header colour that only appears when I switch to mobile view?

Thank you

[tristup]

Hi Dolapo,

Thanks for reaching out.
It seems that you are using the X theme, to change the header color in mobile view you need to add some custom CSS code into Theme Options > CSS to achieve it.
Please find the sample code below, which will change the background color of the navbar.

@media  (max-width: 480px) 
{
    .x-navbar 
    {    
        background-color:#ff0000; //please change according to your need
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[OnePort365]

Hello!

It worked! Thank you.

[matt]

You’re very welcome, Dolapo!