How to hide button at smaller screen widths?

[ddctc]

Hi, I am incorporating a “customer login” button into my menu.

I would like it to disappear when the dropdown appears (at 1200px), since I also put the login link inside the dropdown menu.

I tried putting this code into my header CSS, as well as the CSS inside the theme options:

@media(max-width: 1200px) {
  .e1559-8.x-anchor {
    display: none;
  }
}

But this didn’t do anything. Need some help thanks. I will put URL in secure note.

And PS, it would be nice if there was a built-in hide/show feature inside the header like there is for Cornerstone.

PPS - The code is currently in the header associated with this page, will also link to header URL.

[jade]

Hi there,

You can add a class to the button then target the button using the class name so that you can hide it on mobile view.

The could should be like this:

@media(max-width: 1200px) {
  .the-class {
    display: none;
  }
}

The code above assumes that the class you added to the button is the-class.

Hope this helps.

[ddctc]

Thanks that worked to target by class.

[jade]

Glad to hear it’s sorted.

Cheers!