bootstrap 3: side navbar on collapse into top navbar

Question

I don't think i've worded this properly so let me elaborate i'm trying to have my side navbar collapse into a button that functions as a top button navbar so this [actually nav-pills];

but collapses into this into the header tag:

on the top with this dropbox function.

currently my code has the dropdown occur where the sidebar would be

here's the code i'm using, Ive made no custom CSS adjustments other than color changes.

 <header class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <h1 class="brand"><a href="index.html">bootstrap</a></h1>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
  </nav>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><!--aside-->
      <aside>
        <div class="collapse navbar-collapse" id="collapse">  
        <h4>Menu</h4>
          <ul class="nav nav-pills nav-stacked">
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">CV</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </aside>
    </div>

hope this makes sense thanks!

hotrattz hotrattz · Accepted Answer · 2014-04-12T01:41:32

found the visible and hidden classes this worked

<header class="container"><!--header-->
  <div class="row">
    <div class="col-lg-12">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <h1 class="brand"><a href="index.html">John Doe</a></h1>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        </div>
      </nav>
    </div>
  </div> 
  <div class="collapse navbar-collapse" id="collapse">  
    <ul class="nav navbar-nav visible-xs">
      <li><a href="gallery1.html">project 01</a></li>
      <li><a href="gallery2.html">project 02</a></li>
      <li><a href="gallery3.html">project 03</a></li>
      &nbsp;
      <li><a href="cv.html">About</a></li>
      <li><a href="#" target="_blank">link</a></li>
      <li><a href="mailto:[email protected]">Contact</a></li>
    </ul>
  </div>
</header><!--header-->
<div class="container"><!--content area-->
  <div class="row">
    <aside class="col-lg-3 col-md-3 col-sm-3"><!--aside-->
      <div class="collapse navbar-collapse" id="collapse"> 
        <ul class="nav nav-pills nav-stacked hidden-xs"> 
          <h4>Works</h4>
            <li><a href="gallery1.html">project 01</a></li>
            <li><a href="gallery2.html">project 02</a></li>
            <li><a href="gallery3.html">project 03</a></li>
            &nbsp;
            <li><a href="cv.html">About</a></li>
            <li><a href="#" target="_blank">link</a></li>
            <li><a href="mailto:[email protected]">Contact</a></li>
        </ul>
      </div>
    </aside><!--aside-->

bootstrap 3: side navbar on collapse into top navbar

1 Answers