1 reply [Last post]
axchink
axchink's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-8
Joined: 2014-11-29
Posts: 2
Points: 3

When I use the class of

and scrolling down the website, the contents do not go behind the main nav menu but instead, it goes on top of it.
I want to create a responsive site, everything else goes BEHIND the navigation bar so it is not visible but
the images with
on top goes on top of the nav bar

Please help

here is my code for HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flatspenware</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <link href="css/vendor/bootstrap.min.css" rel="stylesheet">
  <link href="css/flat-ui.css" rel="stylesheet">
  <link href="css/flatspenware.css" rel="stylesheet">
</head>
 
<body>
 
<header>
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Flatspenware</a>
      </div>
 
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
  </nav>
</header>
 
<div class="container">
 
<section class="scroll-panel">
  <div class="jumbotron jumbotron-midnight text-centered">
    <h1>Flatspenware</h1>
    <p>
      We at Flatspenware Create Software that People Want to Use
    </p>
 
    <img src="img/Pensils.png"/>
 
  </div>
</section>
 
 
<section class="scroll-panel">
  <div class="jumbotron jumbotron-midnight text-centered">
  <h1> We make amazing things</h1>
  <p>
    If you hire us, we will build you great software.
  </p>
  </div>
 
  <div class="jumbotron jumbotron-midnight text-centered">
    <div class="row">
      <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-6">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-2">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
  </div>
 
  <div class="row">
    <div class="showcase-item col-md-6">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-2">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Right on the door step of the Rockies
            </p>
        </div>
      </div>
 
</div>
 
</section>
 
  <section class="scroll-panel">
    <div class="jumbotron jumbotron-midnight text-centered">
      <h1>We have amazing people</h1>
        <p>
          Great people do great things
        </p>
    </div>
 
    <div class="jumbotron jumbotron-midnight text-centered">
      <div class="row">
        <div class="showcase-item col-md-2">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-6">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
      <div class="row">
        <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
      <div class="showcase-item col-md-4">
        <div class="showcase-item-box">
            <img src="img/Mail.png"/>
            <p>
              Mail the CEO
            </p>
        </div>
      </div>
 
 
  </section>
 
 
 
</div>
 
<!-- Load JS hre for greater good===============-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
 
</body>
</html>

AND THEN HERE IS MY CODE FOR CSS

body{
	background: #34495e;
	color: #1abc9c;
}
 
img{
	max-width: 100%;
}
 
.scroll-panel{
	padding-top: 78px;
}
 
.navbar{
	border-radius:0;
	position:fixed;
	width:100%;
	padding:0 20px;
}
 
.jumbotron{border-radius:0 !important; padding:0 !important;}
 
.jumbotron-midnight{
	background: #34495e;
	color: #1abc9c;
	margin: 0;
}
 
.text-centered {text-align: center;}
.no-margin {margin:0;}
 
@media(max-width: 767px){
	.jumbotron h1{
		fontsize:31px;
	}
}
 
.showcase-item{
	height: 220px;
	padding: 2px;
}
 
	.showcase-item .showcase-item-box{
		background: #7f8c8d;
		color: #ffffff;
		padding: 40px;
		height: 100%;
		width: 100%;
		text-align: center;
	}

axchink
axchink's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-8
Joined: 2014-11-29
Posts: 2
Points: 3

For clarification, here is