twitter-bootstrap - vertical - menu responsive bootstrap

Bootstrap-Cómo deslizar la barra de navegación de la izquierda en lugar de la parte superior

Question

En mi conocimiento, actualmente bootstrap soporta la barra de navegación desde la parte superior. ¿Cómo puedo deslizarlo desde la izquierda cuando el tamaño de la pantalla es pequeño?

Por ejemplo: - Ver las capturas de pantalla.

En la captura de pantalla proporcionada anteriormente, cuando la pantalla se redimensiona, la barra de navegación se alterna y se desliza hacia abajo desde la parte superior. Prefiero que la navba se deslice desde la izquierda. ¿Cómo puedo lograr esta función en Bootstrap.

Actualmente, según el código, la barra de navegación se desliza desde la parte superior. Aquí está mi código.

<nav class="navbar navbar-site navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a href="{% url ''index'' %} " class="navbar-brand logo logo-title">
            <span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
                        <ul class="dropdown-menu user-menu">
                            <li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
                            <li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
                            <li><a href="{% url ''logout'' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="{% url ''login'' %}">Login</a></li>
                    <li><a href="{% url ''signup'' %}">Signup</a></li>
                {% endif %}
                <li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url ''post_ad'' %}">Post Free Add</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Por favor, consulte este CODEPEN . Los siguientes puntos importantes a tener en cuenta:

• Animate.css requiere la librería Animate.css . Específicamente las slideInLeft y slideOutLeft .

• Trabaja con el dropdown lugar del componente de collapse de Bootstrap.

• Establezca el elemento del dropdown-menu static aplicando la position-static clase position-static en él.

• Aproveche la clase show que se aplica en el elemento dropdown cuando se muestra el dropdown-menu .

• Aproveche la propiedad CSS left para llevar a cabo la transición. Básicamente, estableceremos a la left:-100% en .dropdown.show .dropdown-menu y estableceremos a la left:0px en .dropdown .dropdown-menu

Captura de pantalla:

NOTA : Puede probar otras animaciones para el dropdown-menu desde animate.css .

Buena suerte...

Answer 2

Aquí está el ejemplo completo

$(document).ready(function() {
  $(''#slide-nav.navbar-inverse'').after($(''<div class="inverse" id="navbar-height-col"></div>''));
  $(''#slide-nav.navbar-default'').after($(''<div id="navbar-height-col"></div>''));

  var slidewidth = ''20%'';
  var navbarneg = ''-'' + slidewidth;

  if ($(window).width() < 767) {
    $(''#navbar-height-col'').css("width", slidewidth);
    $(''#navbar-height-col'').css("left", navbarneg);
    $(''#slide-nav #slidemenu'').css("width", slidewidth);
    $(''#slide-nav #slidemenu'').css("left", navbarneg);
  }

  $("#slide-nav").on("click", ''.navbar-toggle'', function(e) {

    // slider is active
    var selected = $(this).hasClass(''slide-active'');

    // set slidemenu width
    $(''#slidemenu'').stop().animate({
      left: selected ? navbarneg : ''0px''
    });

    // set navbar width
    $(''#navbar-height-col'').stop().animate({
      left: selected ? navbarneg : ''0px''
    });

    // set content let
    $(''#page-content'').stop().animate({
      left: selected ? ''0px'' : slidewidth
    });

    // set navbar left
    $(''.navbar-header'').stop().animate({
      left: selected ? ''0px'' : slidewidth
    });

    $(this).toggleClass(''slide-active'', !selected);
    $(''#slidemenu'').toggleClass(''slide-active'');

    $(''#page-content, .navbar, body, .navbar-header'').toggleClass(''slide-active'');
  });

  var selected = ''#slidemenu, #page-content, body, .navbar, .navbar-header'';

  $(window).on("resize", function() {
    if ($(window).width() > 767 && $(''.navbar-toggle'').is('':hidden'')) {
      $(selected).removeClass(''slide-active'');
    }
  });
});

body.slide-active {
  overflow-x: hidden
}
#page-content {
  position: relative;
  padding-top: 70px;
  left: 0;
}
#page-content.slide-active {
  padding-top: 0
}
#slide-nav .navbar-toggle {
  cursor: pointer;
  position: relative;
  line-height: 0;
  float: left;
  margin: 0;
  width: 30px;
  height: 40px;
  padding: 17px 0 0 0;
  border: 0;
  background: transparent;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
  background: #CC0F0F;
  color: #CC0F0F;
}
.navbar-header {
  position: relative
}
.navbar.navbar-fixed-top.slide-active {
  position: relative
}
@media (max-width: 767px) {
  #slide-nav .container {
    margin: 0!important;
    padding: 0!important;
    height: 100%;
  }
  #slide-nav .navbar-header {
    margin: 0 auto;
    padding: 0 15px;
  }
  #slide-nav .navbar.slide-active {
    position: absolute;
    width: 80%;
    top: -1px;
    z-index: 1000;
  }
  #slide-nav #slidemenu {
    background: #f7f7f7;
    left: -100%;
    min-width: 0;
    position: absolute;
    padding-left: 0;
    z-index: 2;
    top: -8px;
    margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav {
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
    min-width: 0;
    width: 80%;
    white-space: normal;
  }
  #slide-nav {
    border-top: 0
  }
  #slide-nav.navbar-inverse #slidemenu {
    background: #333
  }
  #navbar-height-col {
    position: fixed;
    top: 0;
    height: 100%;
    bottom: 0;
    background: #f7f7f7;
  }
  #navbar-height-col.inverse {
    background: #333;
    z-index: 1;
    border: 0;
  }
  #slide-nav .navbar-form {
    width: 100%;
    margin: 8px 0;
    text-align: center;
    overflow: hidden;
    /*fast clearfixer*/
  }
  #slide-nav .navbar-form .form-control {
    text-align: center
  }
  #slide-nav .navbar-form .btn {
    width: 100%
  }
}
@media (min-width: 768px) {
  #page-content {
    left: 0!important
  }
  .navbar.navbar-fixed-top.slide-active {
    position: fixed
  }
  .navbar-header {
    left: 0!important
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="slidemenu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu</a>
        </li>
        <li><a href="#">Menu</a>
        </li>
        <li><a href="#">Menu</a>
        </li>

      </ul>

    </div>
  </div>
</div>
<div id="page-content">
  <div class="container">
    <h1 class="no-margin-top">Left Sidebar menu</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>
  </div>
</div>

Answer 3

Aquí hay una pregunta similar: Bootstrap 3 Slide en Menu / Navbar en Mobile donde la respuesta aceptada es usar jasny bootstrap. Sin embargo, hay otras respuestas si Jasny no era tu taza de té.

Answer 4

Fácil. Cambiar el comportamiento predeterminado de

<button ... data-toggle="collapse" data-target="#my-navbar-collapse">

para slide-collapse funcionalidad que vamos a implementar ahora

<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse">

Donde el menú está contenido dentro de div que tiene el id my-navbar-collapse . Tenga en cuenta que el uso de id en lugar del selector de clase mejorará la accesibilidad porque bootstrap agregará los estados ARIA (expandido / contraído) al menú automáticamente.

<div id="my-navbar-collapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

La clase .collapse en bootstrap garantiza que el menú se oculte inicialmente.

El código:

Y luego pegue el siguiente Javascript en algún lugar del pie de página:

// mobile menu slide from the left
$(''[data-toggle="slide-collapse"]'').on(''click'', function() {
    $navMenuCont = $($(this).data(''target''));
    $navMenuCont.animate({''width'':''toggle''}, 350);
});

Y las siguientes propiedades CSS:

#my-navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 280px; /*example + never use min-width with this solution */
    height: 100%;
}

Algunos consejos:

• Una buena idea es también realizar una consulta receptiva en la que el ancho del menú sea 100% para los teléfonos inteligentes en lugar de siempre 280px. Funciona a las mil maravillas.
• Si tiene un menú horizontal para equipos de escritorio y un control deslizante solo para dispositivos más pequeños, puede aprovechar fácilmente las variables @grid-float-breakpoint y @grid-float-breakpoint-max Bootstrap LESS variables

Answer 5

Hay una buena publicación que intenta imitar el interruptor del lado izquierdo, como en la aplicación de Facebook usando jQuery y Bootstrap. Echale un vistazo:

http://wsnippets.com/responsive-facebook-style-slide-navigation-menu-for-small-devices-using-jquery-and-twitter-bootstrap/

Answer 6

Pruebe lo siguiente y eche un vistazo al siguiente enlace para obtener una explicación más detallada.

<div class="navbar navbar-default navbar-fixed-side navbar-fixed-side-left" role="navigation">

Eche un vistazo al siguiente enlace de Github para arreglar la barra de navegación hacia la izquierda o hacia la derecha

Característica: barra de navegación lado fijo izquierdo o derecho # 13919

Otro enlace útil - Barra lateral de navegación con botón de alternar

Answer 7

Use esto para deslizar de derecha a izquierda:

HTML:

<div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

CSS:

.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}

JS:

$(document).ready(function(){
  $(''a#click-a'').click(function(){
    $(''.nav'').toggleClass(''nav-view'');
  });
});

Descargue los archivos fuente: http://www.themeswild.com/read/slide-navigation-left-to-right

Answer 8

Bootstrap 4 (actualización 2019)

En mi opinión, la forma más sencilla es anular la animación de colapso de Bootstrap para que haga la transición de izquierda a derecha (ancho en lugar de altura). En lugar de alternar la display:block cuando se usa .collapse.show , la barra de navegación siempre display:block que le permite ubicarse según sea necesario y usar transiciones de ambas direcciones de colapso ...

Abra el menú: .collapse - .collapsing - .collapse.show
Cerrar menú: .collapse.show - .collapsing.show - .collapse

    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: -100%;
        width: 100%;
        transition: all 0.4s ease;
        display: block;
        opacity: 0.8;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        left: -100%;
        margin-left: 1px;
        transition: all 0.2s ease;
        opacity: 0.9;
    }
    .navbar-collapse.show {
        margin-left: 100%;
        transition: all 0.2s ease;
        opacity: 1;
    }

https://www.codeply.com/go/KSS4pjqtJy

Answer 9

Sin Plugin, podemos hacer esto.

Ver el enlace

Menú de respuesta de múltiples niveles de Bootstrap con conmutador deslizante del lado izquierdo para dispositivos móviles

$(''[data-toggle="slide-collapse"]'').on(''click'', function() {
  $navMenuCont = $($(this).data(''target''));
  $navMenuCont.animate({
    ''width'': ''toggle''
  }, 350);
  $(".menu-overlay").fadeIn(500);
});

$(".menu-overlay").click(function(event) {
  $(".navbar-toggle").trigger("click");
  $(".menu-overlay").fadeOut(500);
});

// if ($(window).width() >= 767) {
//     $(''ul.nav li.dropdown'').hover(function() {
//         $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeOut(500);
//     });

//     $(''ul.nav li.dropdown-submenu'').hover(function() {
//         $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeIn(500);
//     }, function() {
//         $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeOut(500);
//     });


//     $(''ul.dropdown-menu [data-toggle=dropdown]'').on(''click'', function(event) {
//         event.preventDefault();
//         event.stopPropagation();
//         $(this).parent().siblings().removeClass(''open'');
//         $(this).parent().toggleClass(''open'');
//         $(''b'', this).toggleClass("caret caret-up");
//     });
// }

// $(window).resize(function() {
//     if( $(this).width() >= 767) {
//         $(''ul.nav li.dropdown'').hover(function() {
//             $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeIn(500);
//         }, function() {
//             $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeOut(500);
//         });
//     }
// });

var windowWidth = $(window).width();
if (windowWidth > 767) {
  // $(''ul.dropdown-menu [data-toggle=dropdown]'').on(''click'', function(event) {
  //     event.preventDefault();
  //     event.stopPropagation();
  //     $(this).parent().siblings().removeClass(''open'');
  //     $(this).parent().toggleClass(''open'');
  //     $(''b'', this).toggleClass("caret caret-up");
  // });

  $(''ul.nav li.dropdown'').hover(function() {
    $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeOut(500);
  });

  $(''ul.nav li.dropdown-submenu'').hover(function() {
    $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find(''>.dropdown-menu'').stop(true, true).delay(200).fadeOut(500);
  });


  $(''ul.dropdown-menu [data-toggle=dropdown]'').on(''click'', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass(''open'');
    $(this).parent().toggleClass(''open'');
    // $(''b'', this).toggleClass("caret caret-up");
  });
}
if (windowWidth < 767) {
  $(''ul.dropdown-menu [data-toggle=dropdown]'').on(''click'', function(event) {
    event.preventDefault();
    event.stopPropagation();
    $(this).parent().siblings().removeClass(''open'');
    $(this).parent().toggleClass(''open'');
    // $(''b'', this).toggleClass("caret caret-up");
  });
}

// $(''.dropdown a'').append(''Some text'');

@media only screen and (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 999999;
    width: 280px;
    height: 100%;
    background-color: #f9f9f9;
    overflow: auto;
    bottom: 0;
    max-height: inherit;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
  .navbar-fixed-top {
    position: initial !important;
  }
  .navbar-nav .open .dropdown-menu {
    background-color: #ffffff;
  }
  ul.nav.navbar-nav li {
    border-bottom: 1px solid #eee;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-nav .open .dropdown-menu>li>a {
    padding: 10px 20px 10px 15px;
  }
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

li.dropdown a {
  display: block;
  position: relative;
}

li.dropdown>a:before {
  content: "/f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 15px;
}

li.dropdown-submenu>a:before {
  content: "/f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 15px;
}

ul.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

.dropdown-menu {
  padding: 0px;
  margin: 0px;
  border: none !important;
}

li.dropdown.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu.open {
  border-bottom: 0px !important;
}

li.dropdown-submenu>a {
  font-weight: bold !important;
}

li.dropdown>a {
  font-weight: bold !important;
}

.navbar-default .navbar-nav>li>a {
  font-weight: bold !important;
  padding: 10px 20px 10px 15px;
}

li.dropdown>a:before {
  content: "/f107";
  font-family: FontAwesome;
  position: absolute;
  right: 6px;
  top: 9px;
  font-size: 15px;
}

@media (min-width: 767px) {
  li.dropdown-submenu>a {
    padding: 10px 20px 10px 15px;
  }
  li.dropdown>a:before {
    content: "/f107";
    font-family: FontAwesome;
    position: absolute;
    right: 3px;
    top: 12px;
    font-size: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="slide-navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
                <li class="dropdown-submenu">
                  <a href="#" data-toggle="dropdown">SubMenu 1</span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                    <li class="dropdown-submenu">
                      <a href="#" data-toggle="dropdown">SubMenu 2</span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <div class="menu-overlay"></div>
    <div class="col-md-12">
      <h1>Resize the window to see the result</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non bibendum sem, et sodales massa. Proin quis velit vel nisl imperdiet rhoncus vitae id tortor. Praesent blandit tellus in enim sollicitudin rutrum. Integer ullamcorper, augue ut tristique
        ultrices, augue magna placerat ex, ac varius mauris ante sed dui. Fusce ullamcorper vulputate magna, a malesuada nunc pellentesque sit amet. Donec posuere placerat erat, sed ornare enim aliquam vitae. Nullam pellentesque auctor augue, vel commodo
        dolor porta ac. Sed libero eros, fringilla ac lorem in, blandit scelerisque lorem. Suspendisse iaculis justo velit, sit amet fringilla velit ornare a. Sed consectetur quam eget ipsum luctus bibendum. Ut nisi lectus, viverra vitae ipsum sit amet,
        condimentum condimentum neque. In maximus suscipit eros ut eleifend. Donec venenatis mauris nulla, ac bibendum metus bibendum vel.
      </p>
    </div>

  </body>

</html>