Coxer
Coxer

Reputation: 1704

Twitter bootstrap links in mobile nav

Is it possible to show some links besides the brand and the toggle button, in the mobile version of the navbar? My navigatin looks like that:

<nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;"><%= __('chart.from') %></a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;"><%= __('chart.to') %></a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a id="chart_btn" href="#chart" data-toggle="tab"><%= __('chart.graph') %></a></li>
            <li><a id="table_btn" href="#table" data-toggle="tab"><%= __('chart.table') %></a></li>
          </ul>
        </div>
      </nav>

I 'd like to have the last two elements visible in the mobile version as well.

Upvotes: 0

Views: 477

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362880

You can use the navbar-link class inside the nav-header so that the links don't collapse into the mobile menu..

<nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header pull-right">
          <p class="navbar-text">
            <a id="chart_btn" href="#chart" data-toggle="tab" class="navbar-link">graph</a>
            <a id="table_btn" href="#table" data-toggle="tab" class="navbar-link">table</a> 
            &nbsp;
          </p>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;">from</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_from" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
          <ul class="nav navbar-nav">
            <li><a href="#" style="cursor:default;">to</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input id="date_to" type="text" class="dtp form-control" data-date-format="hh:ii dd.mm.yyyy">
            </div>
          </form>
        </div>
</nav>

Bootply

Upvotes: 1

Christina
Christina

Reputation: 34642

What's inside the collapse class is collapsed. If you want a couple links, and they are short enough, outside the collapse, but inside the bar, next to the brand, put them after the brand but before the collapse div and style them accordingly.

Upvotes: 0

Related Questions