CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill
Bill

Reputation: 2349

Bootstrap static navbar force expand on small screen

Given this menu code from a boostrap template, I want each menu item to both stack and take up the full width when the screen size is detected to be small. Essentially, identical functionality to when the "triple bar" menu button is hit, except the user does not have to manually press it.

Thanks in advance.

  <!-- Static navbar -->
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

Upvotes: 6

Views: 8641

Answers (1)

absqueued
absqueued

Reputation: 3063

What I understand is you wanted to make all menu items visible by default without users having to click on triple line (hamburger) menu and all menu items should be stacked horizontally on smaller screen.

Your code above is fine. Just add a class "in" to the navbar-collapse div and all set.

<div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse in">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>

Here is demo: http://jsfiddle.net/shekhardesigner/35gSz/

Upvotes: 7

Related Questions