Bootstrap 4 - Remove margin of the div under the navbar when the nav is expanded

Question

Can someone help with this case, please

I would like to remove margin-top of the div(which has a permanent class my-3 for margin-top 1rem) under the navbar. I would like that margin-top class (my-3) to be active only when the navbar isn't expanded, because when the nav's been expanded there is a gape between it and the div.

 <div role="navigation"> </div>
        <div class="container-fluid ">
                <div class="row-9">
                  <div class="col-xl-9 my-3">
                  </div>
                </div>
        </div>

Thank you.

danielo danielo · Accepted Answer · 2017-10-08T11:07:05

Try something like this:

@media screen and (min-width: your choice) {
      .no-margin {
              margin-top: 0px;
       }
}

Then use that class on the div you like. If you have put the links to your CSS and bootstrap in the correct order your code will override Bootstraps code

Bootstrap 4 - Remove margin of the div under the navbar when the nav is expanded

1 Answers