CSS visibility in media query is working one way but not the other-CodePudding

I came across a problem I could not find a solution to online. I am creating a navbar for the mobile version, and want to set a media query to make the navbar visible on smaller screen size.

After trying a lot with the visibility and display feature, I noticed that the visibility is working one way but not the other.

When I set the mobile-navbar on visible at bigger scale and invisible in smaller screen-scale, that works perfectly. Setting the navbar to be invisible on normal size and visible on the mobile screen however doesn't.

I am pretty new to this, so maybe there are some other arguments, which interfere with these attributes. Below I will place anything that is related with the class names/id.

@media only screen and (max-width: 1000px) {
  .navbar-mobile-container {
    visibility: hidden;
  }
}

.navbar-mobile-container {
  visibility: visible;
  z-index: 10;
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background-color: #04AA6D;
}

.navbar-mobile-container>button>img {
  transform: scale(1.5);
}

.navbar-mobile-container>button {
  background-color: transparent;
}

<body>
  <div >
    <button><img src="./svg/svg-cah/three-dots-vertical.svg"></button>
    <button><img src="./svg/svg-cah/shuffle.svg"></button>
    <button><img src="./svg/svg-cah/arrow-clockwise.svg"></button>
    <button><img src="./svg/svg-cah/check.svg"></button>
  </div>

</body>

CodePudding user response：

When working with media queries you can play around with min-width and max-width, it depends on what you're looking for.

A different thing to keep in mind, is that CSS 'reads' from top to bottom. So if you declare something at the top of your file, it can be overwritten later on in your file. In this case, when I transfer your media query to the bottom of the CSS file, it seems to work..

CodePudding user response：

Order of operation...

.navbar-mobile-container {
  visibility: visible;
  z-index: 10;
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background-color: #04AA6D;
}

.navbar-mobile-container>button>img {
  transform: scale(1.5);
}

.navbar-mobile-container>button {
  background-color: transparent;
}
@media only screen and (max-width: 1000px) {
  .navbar-mobile-container {
    visibility: hidden;
  }
}

<body>
  <div >
    <button><img src="./svg/svg-cah/three-dots-vertical.svg"></button>
    <button><img src="./svg/svg-cah/shuffle.svg"></button>
    <button><img src="./svg/svg-cah/arrow-clockwise.svg"></button>
    <button><img src="./svg/svg-cah/check.svg"></button>
  </div>

</body>