Twitter bootstrap links in mobile nav

Question

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.

Answer 1

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

Answer 2

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.