No projeto que estou fazendo, quando o viewport for menor que 767px ele exibirá um menu/navbar porém, ele só deverá ser exibido após determinada seção da página.
Fiz um exemplo no Fiddle, lá está mais bem explicado.
Seção 1 - Não exibe
Seção 2 (Em diante) - Exibe.
HTML:
<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"> About</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal2" data-direction='bottom'> Sobre </a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal3" data-direction='bottom'> Contact </a></li>
</ul>
</div>
</div> </div> </nav>
<div id="logo">
<center>
<a href="#desce" class="page-scroll btn btn-xl">SECTION 1</a>
</center> </div>
<div id="content">
<p> SECTION 2 </p>
<p> The navbar will appear here down/hereafter!</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;
}