CODEWITHSUNDEEP
csstwitter-bootstrapmedia-queriesresponsive-design
esafwan
esafwan

Reputation: 18029

Prevent menu from collapsing in 768px display CSS media query

I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.

The menu when not collapsed

Then menu collapses ones width less than 768px

This is my html

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

I know it has something to do with the media query in bootstrap, but not able to understand.

Upvotes: 26

Views: 73430

Answers (9)

Michael Cole
Michael Cole

Reputation: 16217

Here's what I used for bootstrap 3.3.4. It's a hack, but it's also not a 2-day fix redoing the css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

You may need to tweak the selectors, but basically, make the header full-width, then show and float the button right.

Upvotes: 0

pine3ree
pine3ree

Reputation: 468

You can customize Twitter Bootstrap css compiling it from sass-twitter-bootstrap scss files and setting $navbarCollapseWidth in _variables.scss to your desired value...

Edit

As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.

Upvotes: 31

Fred K
Fred K

Reputation: 13910

If you want to completely disable the collapsing navbar, add this variable in your custom LESS file:

@grid-float-breakpoint: 0px;

Upvotes: 1

Andreas Ek
Andreas Ek

Reputation: 159

find variable:

@grid-float-breakpoint

which is set to @screen-sm, you can change it according to your needs.

If you override the vendor less file, set the variable to 0px, eg:

@grid-float-breakpoint: 0px;

Upvotes: 2

Galaxy
Galaxy

Reputation: 3400

You'll want to read up the section: Using the media queries at the bootstrap site: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)

You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here: http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)

Upvotes: 16

neves
neves

Reputation: 39183

Reading the answers, I believe you are talking about Bootstrap version 2. Maybe someone looking for an answer for Bootstrap 3 will arrive here. This answer is for you!

  1. Go to Bootstrap customization page
  2. redefine the @grid-float-breakpoint value for something hardcoded (e.g. 520px) or for a smaller screen size like @screen-xs-min
  3. Press the button at the bottom of the page to recompile the css files
  4. substitute your bootstrap.css and bootstrap-min.css files with the ones from the downloaded zip file.

Upvotes: 8

Alastair
Alastair

Reputation: 6975

This example is from the official website: http://getbootstrap.com/examples/non-responsive/

The changes are in non-responsive.css but the important parts pertaining to .navbar are:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}

Upvotes: 1

Ross Hambrick
Ross Hambrick

Reputation: 5940

If all you want to do is not have the nav collapse until it reaches a smaller value, the simplest way is to head over to the Twitter Bootstrap customization page, change the @navbarCollapseWidth to the value you want, and download the package. Done.

If you want to customize beyond what this page allows, you'll have to override or customize as described in the other answers.

Upvotes: 1

Matt Jackson
Matt Jackson

Reputation: 103

This worked well for me:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}

Upvotes: 9

Related Questions