Can't display input

[ricardoaguilarm]

CODEPEN [Project witch code]: https://codepen.io/ricardorien/pen/OJbxYYa?editors=0100

I have this project and i only want to show an Input[type=“checkbox”] IF I’am in Desktop-Version.
My SCSS Is written in Mobile First. So I do this:

• In line 101 of SCSS (Because the Input[type=“checkbox”] is inside the Nav) This Hide the input in Mobile-version:

  nav { 
    display: none;

    input[type=checkbox] {
      display: none;
    }

    label {
      display: none;
    }
  }

• Then in line 496 (inside a Media query with a min-width: 768px [Desktop-version]) I declare two display propertys to Input and label because I want to display the Togle Switch :

  input[type=checkbox] {
    display: inline;
    height: 0;
    width: 0;
    visibility: hidden;
  }

  label {
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 22px;
    background: var(--button-color);
    border-radius: 100px;
    position: relative;
  }

BUT nothing happens. My input still hidden even in Desktop version.
Anyone knows what’s happend here?

Thanks in advance!

[OrrSun]

It’s a matter of CSS specificity.

The first time you declare the styles to be applied to the input, you do it under .navbar nav so you’re basically selecting .navbar nav input[type=checkbox], but the second time (in the media query) you only select nav input[type=checkbox].
This means that the original style has a greater level of specificity and so it overrides the one in the media query.

Nest the input and label declarations in the media query inside .navbar nav and see what happens.

[PulkitSinghDev]

Well I think you have done mistake in applying css
because you are applying it under.navbar nav so you’re basically selecting .navbar nav input[type=checkbox] , but in the second time (in the media query) you have only selected nav input[type=checkbox] . which overrides the media query by original style.
so just nest the input and label declarations under .navbar nav and then it will work great and if you gets any issue again just reply on this topic and will get back to you soon

[ricardoaguilarm]

Thanks a lot! Wow It was so simple, I don’t know why I didn’t see the problem before. I think I got lost with the nesting.

[ricardoaguilarm]

Yes! That was the problem. Thanks for take your time to respond.