JSFiddle - React, Tailwind, and code Playground

by gtw7375

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-bottom visible-xs">
  <div class="container-fluid"> 
  
    <div class="navbar-header">
         <!-- <a class="navbar-brand" href="#">LOGO PSTCH</a> </div> -->
    
   
    <div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
       <li><a  href="#" data-toggle="modal" data-target="#myModal1" data-direction="bottom"> Sobre</a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal2" data-direction='bottom'> Contato </a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal3" data-direction='bottom'> Quem sou </a></li>
      
      
      </ul>    
    </div>
    </div>  
  </div> 
</nav>

 <div id="logo"> 
    
            <center>
                            <a href="#desce" class="page-scroll  btn btn-xl">SEÇÃO 1</a>
            </center>
  </div>

  <div id="content">
    
    <p> SEÇÃO 2  </p>
       
      <p> O navbar deverá aparecer daqui por diante</p>
  </div>

CSS

html, body {
    height:100%;
    padding:0;
    margin:0;

}


#logo{
            background: black;
            width: 100%;
            height: 100%;          
                       

}

#content {
        border: 1px solid black;
        width: 100%;
        height: 50%;
}

.navbar .nav  li{
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: bottom;
   
}


.navbar .navbar-collapse {
  text-align: center;
}