Edward68 Edward68 - 1 month ago 5x
jQuery Question

Prevent bootstrap columns from collapsing

I am using bootstrap and have created a navbar at the top of my page. The navbar is divided into 3 columns. The center column has a menu inside which I have hidden with the display:none property inside of css. When I hover over a menu icon the menu appears. The issue that I am having is that when the menu is hidden the column collapses and pushes the column to its right into the middle position. I am using jquery to show and hide the menu on hover. I would really appreciate it if someone could please tell me how to prevent the column from collapsing when the menu is hidden. Thanks.


The 2 divs in the third column just needed a pull-right class added. After adding the class to the divs, the divs positions needed to be swapped.

  <div id="main-menu">
<div id="navbar" class="navbar navbar-inverse">
  <div id="name" class="col-xs-12 col-sm-4 col-md-4">
    <h1 class="h3">website name</h1>
  <ul class="col-xs-12 col-sm-4 list-inline pagination-large" id="menu">
    <li class="active list-inline-item"><a href="index.php">Home</a></li>
    <li class="list-inline-item"><a href="#" class="login">Login</a></li>
    <li class="list-inline-item"><a href="shop.php">Shop</a></li>
    <li class="list-inline-item"><a href="#">Blog</a></li>
    <li class="list-inline-item"><a href="contact.php">Contact</a></li>
  <div class=" col-xs-6 col-sm-2 pull-right" id="burger">
    <img src="Bootstrap/glyphicons_free/glyphicons/png/glyphicons-159-show-lines.png" class="open pull-right" alt="burger menu" title="Burger Menu">
  <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 pull-right" id="cart">
    <img src="images/cart.png" alt="Open Shopping Cart" title="Open Cart">

Demo: Jsfiddle