Navbar background color responsive

[gallagherBD]

Hello, I grabbed some CSS to change the background color for the navbar and it works on desktop but not on mobile. Here is the website: www.isomaxguard.com.

Can you take a look and tell me why/how to fix?

[prakash_s]

Hello @gallagherBD,
Thank you for writing in, it seems that background on the navbar is added via a custom CSS, it could be added under Theme Options > CSS area. The reason it is not working in mobile devices just because in your CSS code it has been asked to work in the desktop versions so it would work only in those devices which screen size would be more than 980px.

Please have a look at the screenshot given below.

In order to work it in all devices, you need to remove media query and add this code only in your X>Theme Options > CSS area

.x-navbar {
 background-color: #1c2841 !important;
}

Please have a look at these articles to learn more how to set background-colour and how to use browser’s element inspector

How to Inspect Website Elements With Your Web Browser

https://www.w3schools.com/cssref/pr_background-color.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please note that the purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Thanks

[gallagherBD]

@PrakashS

.x-navbar {
 background-color: #1c2841 !important;
}

Thanks, but I will be honest this is not helpful for someone that is not well versed in code. I just find it funny that the other stacks have the ability to customize the header and yet this stack needs custom CSS.

I switched stacks.

[ruenel]

Hello @gallagherBD,

The code was added in the custom CSS section. You have this code in there:

@media (min-width:980px){
    .x-logobar{
        display:none !important;
        visibility:hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a{
        text-indent:-99999px;
        text-align:left;
        width:306px;
        height:75px;
        background:url(http://isomaxguard.com/wp-content/uploads/2020/07/isomaxguard-white.png) no-repeat center center;
        background-size:contain;
    }
    .x-colophon.bottom{
        background:#1c2841;
    }
    .x-colophon.top{
        background:grey;
    }
    .x-colophon.bottom{
        color:#ffff;
    }
    .x-colophon.bottom{
        padding:10px 0;
    }
    .woocommerce .price > .amount{
        color:grey;
    }
    span.woocommerce-Price-amount.amount{
        color:grey;
    }
    .x-navbar{
        background-color:#1c2841 !important;
    }

I am not sure why the code uses @media (min-width:980px) which is causing the issue. I would highly recommend that you update it and remove it:

     .x-logobar{
        display:none !important;
        visibility:hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a{
        text-indent:-99999px;
        text-align:left;
        width:306px;
        height:75px;
        background:url(http://isomaxguard.com/wp-content/uploads/2020/07/isomaxguard-white.png) no-repeat center center;
        background-size:contain;
    }
    .x-colophon.bottom{
        background:#1c2841;
    }
    .x-colophon.top{
        background:grey;
    }
    .x-colophon.bottom{
        color:#ffff;
    }
    .x-colophon.bottom{
        padding:10px 0;
    }
    .woocommerce .price > .amount{
        color:grey;
    }
    span.woocommerce-Price-amount.amount{
        color:grey;
    }
    .x-navbar{
        background-color:#1c2841 !important;
    }
    

@PrakashS suggested removing the code. If you are using Integrity stack, you do not have an option to change the background color of the navbar. Meanwhile, when using different stacks, you should be able to change the background color in X > Theme Option > Stacks.

We would love to know if this has worked for you. Thank you.