I'm using bootstrap to create a responsive navigation, and I'm using one of the icons that bootstrap provides to create a show/hide menu. The problem is that it is displaying the arrow on a different line. Is there a way to display the arrow next to the text on one line?

Here is a demo: /

Here's the code that is acpanied with this fiddle to make this self contained:

<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
  <div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <span class="visible-xs navbar-brand">Left Navigation</span>
      </div><!--/.navbar-header -->
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
      <nav id="leftNav" role="navigation" aria-label="Left Navigation">
      <!-- TemplateBeginEditable name="Left Navigation" -->  
        <ul class="nav navbar-nav"> 
          <li><a href="#.html">Home</a></li>
          <li><a href="#"><strong>Cars</strong></a>
            <a href="#ELP" class="expander" ><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
            <ul id="ELP">
              <li><a href="#">BMW</a></li>
              <li><a href="#">Honda</a></li>
              <li><a href="#">Toyota</a></li>   
            </ul>
          </li> 
        </ul> 
      </nav> <!-- /Left Navigation -->
      </div> 
      <!--/.nav-collapse -->
    </div> <!--/.navbar-default -->
    </div> <!--/.sidebar-nav -->
  </div> <!--/.col-sm-3 col-md-3 col-lg-2-->  

I'm using bootstrap to create a responsive navigation, and I'm using one of the icons that bootstrap provides to create a show/hide menu. The problem is that it is displaying the arrow on a different line. Is there a way to display the arrow next to the text on one line?

Here is a demo: http://jsfiddle/0L6g87h2/

Here's the code that is acpanied with this fiddle to make this self contained:

<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2">
  <div class="sidebar-nav">
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <span class="visible-xs navbar-brand">Left Navigation</span>
      </div><!--/.navbar-header -->
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
      <nav id="leftNav" role="navigation" aria-label="Left Navigation">
      <!-- TemplateBeginEditable name="Left Navigation" -->  
        <ul class="nav navbar-nav"> 
          <li><a href="#.html">Home</a></li>
          <li><a href="#"><strong>Cars</strong></a>
            <a href="#ELP" class="expander" ><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
            <ul id="ELP">
              <li><a href="#">BMW</a></li>
              <li><a href="#">Honda</a></li>
              <li><a href="#">Toyota</a></li>   
            </ul>
          </li> 
        </ul> 
      </nav> <!-- /Left Navigation -->
      </div> 
      <!--/.nav-collapse -->
    </div> <!--/.navbar-default -->
    </div> <!--/.sidebar-nav -->
  </div> <!--/.col-sm-3 col-md-3 col-lg-2-->  

• javascript
• jquery
• html
• css
• twitter-bootstrap

3 Answers 3

You can include the icon span within the a element. Updated fiddle

<a href="">
    <strong>Cars</strong> 
    <span class="glyphicon glyphicon-circle-arrow-right"></span
</a>

<a href="" class="pull-left">
    <strong>Cars</strong>
</a>

<a href="" class="pull-right">
    <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>

You can wrap the two elements within a span and set the span to display:inline or inline-block.

<span style="display:inline-block;">
    <a href="../Gateway/index.html"><strong>Cars</strong></a>
    <a href="#ELP" class="expander" >
        <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</span>

http://jsfiddle/0L6g87h2/2/

Try this...

<a href="#">
  <span class="glyphicon glyphicon-chevron-right"></span> Demo
</a>