CODEWITHSUNDEEP
htmlcssbootstrap-4margin
PayrollPaul
PayrollPaul

Reputation: 87

Bootstrap 4 , CSS issue - my container is stuck to the nav bar

So, basically I have a navbar that is fixed. I have a container that has content inside but no matter how i apply margin to the css to make it shift, it won't move as expected.

It is honestly the exact same issue as this:

Why does this CSS margin-top style not work?

I tried a variety of things and I think it has to do with margin collapsing but I don't understand how to go about solving my problem. Here is my code 

enter code here

.myNav {background-color:#141414; }
.myNav .navbar-brand{color:white;}
.myNav .nav-link{color:white;}
.myNav .nav-link:hover{color:red;}


html {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
body {
  /* Margin bottom by footer height */

  margin-bottom: 60px;
  background-color: white;
}

body > .container {
  padding: 60px 15px 0;
}

footer {

  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: black;
  color:white;
}

.carousel-item{
    height: 300px;
}
.carousel-item img{
    height: 300px;
}
.myButton{background-color:#557A95; color:white; margin-bottom:20px; margin-top:0px; padding:20px; font-size:15px; }

.contactBG{color:red;
            background-color:grey;
            margin-top:20px;
}

heres the html

  <div >
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md  fixed-top myNav " >

TapeDrilla 

        <li class="nav-item active">
    <a class="nav-link" href="#"><span class="fas fa-music"> </span> KITS <span class="sr-only">(current)</span></a>
  </li>

           <li class="nav-item active">
    <a class="nav-link" href="#"><span class="fas fa-globe"> </span> TUTORIALS <span class="sr-only">(current)</span></a>
  </li>

           <li class="nav-item active">
    <a class="nav-link" href="#"><span class="fas fa-question"> </span> FAQ'S <span class="sr-only">(current)</span></a>
  </li>

           <li class="nav-item active">
    <a class="nav-link" href="Contact"><span class="fas fa-mail-bulk"> </span> CONTACT <span class="sr-only">(current)</span></a>
  </li>

        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="fas fa-user"> </span> USER
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>

                <li class="nav-item active">
    <a class="nav-link" href="#"><span class="fas fa-search"> </span> SEARCH <span class="sr-only">(current)</span></a>
  </li>

    <li class="nav-item active">
    <a class="nav-link" href="#"><span class="fas fa-shopping-cart"> </span> CHECKOUT <span class="sr-only">(current)</span></a>
  </li>





      </ul>

    </div>
  </nav>

I am sorry if i didn't format the code properly, this is only my second time asking a question. Thank you so much for looking at my question:)!

Upvotes: 1

Views: 164

Answers (1)

njain
njain

Reputation: 157

Yes, this problem is due to margin collapsing. you can try two things: -one is, Using float on div - other option is, applying display: inline-block property on div

Upvotes: 1

Related Questions