JSFiddle - React, Tailwind, and code Playground

by berets

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="container" class="panel panel-default">

  <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">This nav need to be fixed</div>
  </div>

  <a data-toggle="collapse" href="#collapse1">
    <button type="button" class="btn btn-info">▲</button>
  </a>

<div class="panel panel-default teste-menu">

  <div id="collapse1" class="panel-collapse collapse menu-visivel">
    <div class="panel-body">Fixed nav menu</div>
  </div>

</div>

</div>



   
   
   
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

Lorem Ipsum é...

CSS

#container{position: fixed; top:0;height: auto;}

.panel {
width: 100%;
z-index: 999;
background: #000;
border: none;
border-radius: 0;
color: #fff;
margin-bottom: 0;
top: 0}

.teste-menu {
width: 100%; 
background: #ccc; 
position: fixed; 
z-index: 99; 
top: auto;}

.collapse.menu-visivel {
display: block; 
visibility: visible;}

.btn-info {
float: right;
right: 45px;
border-radius: 0;
background: #000;
border-color: #000;
position: fixed;
z-index: 999;}