image inside jumbotron div cover the navigation bar when navbar set to 'position: absolute;'

Question

I am trying to set the navigation bar to position: absolute; so it wont make the html move down when expand it. but when I do it, the div below the navigation move up and cover the navigation bar.

html:

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">testing</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#details">About</a>
      <a class="nav-item nav-link" href="#abilities">Abilities</a>
    </div>
  </div>
</nav>

 <div class="jumbotron text-center" id="main-jum">
    <img src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">

 </div>

CSS:

.navbar {
  position: absolute;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  opacity: 0.5;
}

here's my codepen link: https://codepen.io/obiwankenoobi/pen/PQpopE?editors=1100

https://codepen.io/obiwankenoobi/pen/PQpopE?editors=1100 here is the full code — obiwankenoobi, Feb 10 '18 at 17:19

Nihal · Answer 1 · 2018-02-10T17:53:31.993

try copy paste whole css if it works then i will explain what i have changed and why

DEMO:

.navbar {
  position: relative;
  top : 0;
  z-index: 10;
  width: 100%;
  border:1px solid white
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  top:0;
  position:absolute;
  border-radius: 0!important;
  padding: 0;
  width: auto;
  background-color: Black;
  border:1px solid yellow;

  
}

#main-jum img {
  width: 100%;
  height:700px;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;
  
}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:  #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }
  
  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }
  
  p {
  font-size: 3.5vmin;
}
  
  #abilities {
    margin-bottom: 30px;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<nav class="navbar navbar-expand-md navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">ob1wankenoooob1</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#details">About</a>
      <a class="nav-item nav-link" href="#abilities">Abilities</a>
    </div>
  </div>
</nav>


<div id="details" class="container-fluid">
    <div class="row">
      <div id="about" class="col-md-8">
          <h4>about me</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque, finibus vel enim in, laoreet scelerisque ligula. Sed at augue sed lorem sollicitudin pulvinar. Sed ut elit ullamcorper, aliquet ante ac, maximus urna. Sed a nisl eu massa imperdiet pellentesque. Pellentesque non justo vitae libero rhoncus posuere in eu est. Maecenas eu fringilla orci, eu porta ex.</p>
     </div>
      
      <div id="more" class="col-md-4"> 
            <h4>more</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque.</p>
      </div>
    </div> <!--row end-->
</div> <!-- container-fluid end-->

<div class="container">
  <div class="row text-center" id="abilities">
    <div class="col-sm-4 img-abilities">
      <img id="code-img" src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png">
    </div>

     <div class="col-sm-4">
      <img class="img-abilities" id="responsive-img" src="https://cdn4.iconfinder.com/data/icons/flat-services-icons/512/responsive-web.png">
    </div>

    <div class="col-sm-4">
      <img id="design-img" src="http://trstech.ca/wp-content/uploads/2016/03/design_icon.png">
    </div>
  </div> <!-- abilities end -->
</div> <!-- container-fluid ends-->

<footer class="text-center">
  <p >all rights reserved  <a href="https://twitter.com/ob1wankenoooob1" target="_blank">@ob1wankenoooob1</a></p>
  <p id="year">test</p>
</footer>


<script type="text/javascript">

  var date = new Date();
  var fullYear = date.getFullYear();
  var yearElement = document.getElementById("year");
  yearElement.innerHTML = fullYear + ' &copy;';

</script>

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<script>
  window.sr = ScrollReveal();
  sr.reveal('#about', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
  sr.reveal('#main-jum', {
    opacity: 0 ,
    duration: 2000 ,
    reset: true , 
    viewFactor: 0.6
  });
  
  sr.reveal('#more', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#code-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#responsive-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
  
    sr.reveal('#design-img', {
    duration: 2000,
    origin:'bottom',
    viewFactor: 0.9 ,
    distance:'300px',
    reset: true
  });
            
</script>

you can give `margin-top` if you want some space between about me and .navbar — Nihal, Feb 10 '18 at 17:34
'position: relative;' won't fix my problem , now it push the div below it. You can remove the 'position' at all and it will be the same result. I set it to ''position: absolute;'' so It won't push the image down when expend it as I saw here: https://stackoverflow.com/questions/13212361/css-dropdown-nav-causing-html-content-to-move . it worked on other page Im working on but for some reason I have issues with it on this one. — obiwankenoobi, Feb 10 '18 at 17:41

score 0 · Accepted Answer · answered Feb 10 '18 at 18:15

ok so z-index: 10; was what fixed my code and this is the result i was trying to get. I should have to listen the full instruction here but I ignored z-index: 10; and this was what cause the problem.

.navbar {
  position: absolute;
  top : 0;
  z-index: 10;
  width: 100%;
}

body {
  background-color:#000101;
  font-family: 'Montserrat', sans-serif;
}


nav a {
  color: #00253f!important;
}

nav button{
  background-color: #00253f!important;
  outline:none!important;
}

#main-jum {
  border-radius: 0!important;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: Black;

}

#main-jum img {
  width: 100%;
  height:auto;
  opacity: 0.5;
}

nav button:hover {
  background-color: #003a3f!important;
}

nav a:hover {
  color: #003a3f!important;
}

#abilities img {
  width: 30vmin;

}

#details {
  margin-top:100px;
  margin-bottom: 150px;
}

#abilities {
  margin-bottom: 300px;
}

p {
  font-size: 20px;
  color:    #00253f;
}

a:hover {
  text-decoration: none;
}

footer {
  margin-top: 190px;
}

h4 {
  font-size: 6vmin;
  color: #003a3f;
}

.right {
  float: right;
}

.left {
  float: left;
}

@media (max-width: 768px) {
  #abilities img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
    width: 50vmin;
  }

  #main-jum {
    display: block;
  }
  .col-sm-4 {
    margin-top: 25px;
  }

  p {
  font-size: 3.5vmin;
}

  #abilities {
    margin-bottom: 30px;
  }

  #main-jum img {
    max-width: 100%;
    min-height: 400px;
    object-fit:cover;
  }

}

image inside jumbotron div cover the navigation bar when navbar set to 'position: absolute;'

2 Answers2