Removing a div using media queries

Question

I'm trying to remove .navbar-brand>img when the screen size has increased more than 768px using media queries but i'm not getting any luck. The styling that I have applied to the img is removed however the image remains in the same place. I'm using BS4 if that helps

<body>
    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <!-- Image and text -->
             <a class="navbar-brand" href="#"><img alt="" class="d-inline-block align-top" height="30" src="img/SpartanHead.png" width="30"></a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span></button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="about.html">ABOUT</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>

CSS

.navbar {
  background-color: #2A2F35;
  padding: 0 !important;
}
/*Navbar Links*/

.navbar-nav a {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 1px;
  color: #ffffff !important;
  padding: 25px;
  margin: 0px 25px 0px 25px;
}

@media only screen and (max-width: 768px) {
  .navbar-brand>img {
      width: auto;
      max-height: 90px;
      margin: 10px 0px 10px 30px;
  }
}

@media screen and (min-width: 768px) {
  .navbar-brand>img {
    display: none;
  }
}

The class `d-inline-block` sets the image to `display:inline-block !important;` The `!important` is the reason you cant hide it with regular css anymore. See my answer for further explanation and how to properly use the display utilities of bootstrap. — Fabian S., Jun 21 '18 at 10:55

score 2 · Answer 1 · answered Jun 21 '18 at 10:45

Use !important to prevent override display: none!important;(see fiddle:https://jsfiddle.net/wtyzqkrp/1/)

.navbar {
  background-color: #2A2F35;
  padding: 0 !important;
}
/*Navbar Links*/

.navbar-nav a {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 1px;
  color: #ffffff !important;
  padding: 25px;
  margin: 0px 25px 0px 25px;
}

@media only screen and (max-width: 768px) {
  .navbar-brand>img {
      width: auto;
      max-height: 90px;
      margin: 10px 0px 10px 30px;
  }
}

@media screen and (min-width: 768px) {
  .navbar-brand>img {
    display: none!important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <!-- Image and text -->
             <a class="navbar-brand" href="#"><img alt="" class="d-inline-block align-top" height="30" src="https://material.angular.io/assets/img/examples/shiba1.jpg" width="30"></a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span></button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="about.html">ABOUT</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

While this answer indeed fixed the problem i want to point out that using css `!important` is never _good_, its always a **workaround**. In general i suggest avoiding `!important` at all cost. Still there are some cases youll need it in some cases e.g. overwriting inline styles from javascript you cant change, but generally speaking a healty approach imo is to stay away as far as you can from `!important` and just use **proper cascading**. — Fabian S., Jun 21 '18 at 10:53
@FabianSchoner Thanks for that information, found it very useful — Will_Ghost16, Jun 21 '18 at 11:20

score 2 · Accepted Answer · answered Jun 21 '18 at 10:58

Just use the display utility classes reponsive versions. Youre setting the image to display:inline-block with class="d-inline-block", just add d-md-none to automatically set it to display:none on >768px.

change

<img alt="" class="d-inline-block align-top" height="30" src="img/SpartanHead.png" width="30">

to

<img alt="" class="d-inline-block d-md-none align-top" height="30" src="img/SpartanHead.png" width="30">

and you dont have to add any custom css.

See https://getbootstrap.com/docs/4.1/utilities/display/ for more information.

Removing a div using media queries

2 Answers2