Hiding Liquid for mobile only won't work no matter what

[FrequencyWear]

- Whisper Theme

- Frequencywear.eu

I have created a custom Liquid to make my header Navigation a different Color than the Main Header. This though looks completely messed up on mobile, which is why i am trying to fix by making that specific liquid not apply for mobile.

the Liquid is assigned as a div via

<div class="headercolor"> [my custom liquid] </div>

I have tried the following:

Custom CSS + bottom of base.css:

@media screen and (max-width: 768px) {
.headercolor {
display: none;
}
}

Theme.liquid:

<style>
@media screen and (max-width: 768px) {
.headercolor {
display: none;
}
}
</<style>

this is on Desktop, all fine.

this is on mobile, very much messed up.

[Made4uo-Ribe]

Hi @FrequencyWear 

PLease, share your store URL. Thanks!

[FrequencyWear]

https://admin.shopify.com/store/semkdt-fp

this one?

[ecoboostify · Accepted solution]

Adding custom Liquid code to style your header color can be effective, but it’s similar to making edits in your theme.liquid file or adjusting the base.css file. However, editing base.css is generally the better approach as it keeps your custom styles centralized and easier to manage.

Here’s how to proceed:
1. Remove existing custom code in <div class="headercolor"> and theme.liquid
2. Update the code in base.css

sticky-header.header-wrapper.gradient:after {
    content: "";
    background: #ab80da;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -50px;
}

sticky-header.header-wrapper.gradient {
    position: relative;
}

.header__active-menu-item,.header__menu-item,span.header__active-menu-item  {
    color: black;
}
@media screen and (max-width: 768px) {
    sticky-header.header-wrapper.gradient:after {
        display: none;
    }
}

[FrequencyWear]

It worked, thank you a lot!

[pawankumar]

Hi @FrequencyWear 
Please try replacing headercolor  custom liquid with this

<div class="headercolor">
<style>
@media (min-width: 769px){
sticky-header.header-wrapper.gradient:after {
    content: "";
    background: #ab80da;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -50px;
}

sticky-header.header-wrapper.gradient {
    position: relative;
}

.header__active-menu-item,.header__menu-item,span.header__active-menu-item  {
    color: black;
}
}

</style>
</div>

Thanks!

[FrequencyWear]

This worked too, thank you very much!

Unfortunately i can only mark one reply as solution though.