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

Store Design
, , , , ,
1

  • 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

 [my custom liquid]

I have tried the following:

Custom CSS + bottom of base.css:

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

Theme.liquid:


this is on Desktop, all fine.

![FrequencyWear_0-1734533444716.png|669x220](upload://qLfT14kR1hFHDGwbn0vpbgkWm9K.png)

this is on mobile, very much messed up.

![FrequencyWear_1-1734533472702.png|364x168](upload://aHgwFElt6UzMNNlKS6omqTDUT1j.png)
2

Hi @FrequencyWear

PLease, share your store URL. Thanks!

3

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

this one?

4

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
    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;
    }
}
5

Hi @FrequencyWear
Please try replacing headercolor custom liquid with this

Thanks!

6

It worked, thank you a lot!

7

This worked too, thank you very much!

Unfortunately i can only mark one reply as solution though.