Bootstrap responsive sidebar menu to top navbar

Question

So I've been searching and searching for guidance in this with no avail.

Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar.

My HTML code for the sidebar is this:

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

My CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

I have no idea how to get that into a navbar. All I know is how to make the navbar from start, but I don't want that! I don't want any of that fancy animated-overlay-multicolor-accordion-whatever things, please-

Thank you :)

Solution 1

Bootstrap 5 (update 2021)

Some of the classed have change for Bootstrap 5, but the concept is still the same. Here's an updated Bootstrap 5 sidebar to navbar example

Bootstrap 4 (original answer)

It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content.

Bootstrap 4 Sidebar switch to Top Navbar on mobile

<div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                <div class="collapse navbar-collapse">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#">Link</a>
                        </li>
                        ..
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col">
            ..
        </main>
    </div>
</div>

Alternate sidebar to top
Fixed sidebar to top

For the reverse (Top Navbar that becomes a Sidebar), can be done like this example

Solution 2

Big screen:

Small screen (Mobile)

if this is what you wanted this is code https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview

CSS + HTML + JQUERY :

    
    @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
    body {
      font-family: 'Poppins', sans-serif;
      background: #fafafa;
    }
    
    p {
      font-family: 'Poppins', sans-serif;
      font-size: 1.1em;
      font-weight: 300;
      line-height: 1.7em;
      color: #999;
    }
    
    a,
    a:hover,
    a:focus {
      color: inherit;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
    }
    
    .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
    }
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    #sidebar {
      width: 250px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 999;
      background: #7386D5;
      color: #fff !important;
      transition: all 0.3s;
    }
    
    #sidebar.active {
      margin-left: -250px;
    }
    
    #sidebar .sidebar-header {
      padding: 20px;
      background: #6d7fcc;
    }
    
    #sidebar ul.components {
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    }
    
    #sidebar ul p {
      color: #fff;
      padding: 10px;
    }
    
    #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
      color:white;
    }
    
    #sidebar ul li a:hover {
      color: #7386D5;
      background: #fff;
    }
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] {
      color: #fff;
      background: #6d7fcc;
    }
    
    a[data-toggle="collapse"] {
      position: relative;
    }
    
    a[aria-expanded="false"]::before,
    a[aria-expanded="true"]::before {
      content: '\e259';
      display: block;
      position: absolute;
      right: 20px;
      font-family: 'Glyphicons Halflings';
      font-size: 0.6em;
    }
    
    a[aria-expanded="true"]::before {
      content: '\e260';
    }
    
    ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
    }
    
    ul.CTAs {
      padding: 20px;
    }
    
    ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    
    a.download {
      background: #fff;
      color: #7386D5;
    }
    
    a.article,
    a.article:hover {
      background: #6d7fcc !important;
      color: #fff !important;
    }
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content {
      width: calc(100% - 250px);
      padding: 40px;
      min-height: 100vh;
      transition: all 0.3s;
      position: absolute;
      top: 0;
      right: 0;
    }
    
    #content.active {
      width: 100%;
    }
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 768px) {
      #sidebar {
        margin-left: -250px;
      }
      #sidebar.active {
        margin-left: 0;
      }
      #content {
        width: 100%;
      }
      #content.active {
        width: calc(100% - 250px);
      }
      #sidebarCollapse span {
        display: none;
      }
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Collapsible sidebar using Bootstrap 3</title>

  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Our Custom CSS -->
  <link rel="stylesheet" href="style2.css">
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

</head>

<body>



  <div class="wrapper">
    <!-- Sidebar Holder -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <h3>Header as you want </h3>
        </h3>
      </div>

      <ul class="list-unstyled components">
        <p>Dummy Heading</p>
        <li class="active">
          <a href="#menu">Animación</a>

        </li>
        <li>
          <a href="#menu">Ilustración</a>


        </li>
        <li>
          <a href="#menu">Interacción</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
        <li>
          <a href="#">Acerca</a>
        </li>
        <li>
          <a href="#">contacto</a>
        </li>


      </ul>


    </nav>

    <!-- Page Content Holder -->
    <div id="content">

      <nav class="navbar navbar-default">
        <div class="container-fluid">

          <div class="navbar-header">
            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>Toggle Sidebar</span>
                            </button>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Page</a></li>
            </ul>
          </div>
        </div>
      </nav>


    </div>
  </div>





  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <!-- Bootstrap Js CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- jQuery Custom Scroller CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {


      $('#sidebarCollapse').on('click', function() {
        $('#sidebar, #content').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
      });
    });
  </script>
</body>

</html>

if this is what you want .

Solution 3

If this isn't a good solution for any reason, please let me know. It worked fine for me.

What I did is to hide the Sidebar and then make appear the navbar with breakpoints

@media screen and (max-width: 771px) {
    #fixed-sidebar {
        display: none;
    }
    #navbar-superior {
        display: block !important;
    }
}

Comments

[tbrittoborges]

Hey, great solution. Where is wrapper defined? I can't find it on bootstrap4 documentation

[wilsjd]

he asked for Bootstrap 4 but this is using Bootstrap 3 and looks a lot like bootstrapious.com/p/bootstrap-sidebar

[Jeremy]

Great start for a solution. I find that the width of the navbar when vertical is proportional to the browser width, and the high, when horizontal is proportional to the height of the browser window. Is there a way to avoid that?

[Admin]

@Zim I may be wrong about this but when you use the bootstrap rows and columns then you can't make the sidebar "stick" If you want the sidebar to scroll with the main content then I believe you have to use div tags and do a bit more customization unfortunately. Take a look at this bootstrapious.com/p/bootstrap-sidebar

[Zim]

I'm not sure what you mean. The alternate and fixed examples demonstrate a fixed sidebar with the grid.

[cdsaenz]

This is fantastic, I've been trying to add a "collapsible" menu using the dropdown class but the standard navbar solution, when acting as a sidebar, will open a "separate" menu, instead of a collapsible one, as it's the usual when the navbar is on top. I guess the boostrap default won't support this out of the box.

[Neeku]

Please take my upvote, and also tell me if I place all this code in my <body><section> and leave the <header> blank? or split them between the two for the navbar vs. the main content?

[zypA13510]

To make the sidebar sticky: add overflow: auto; max-height: 100vh; to $("main.col").