CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
craig
craig

Reputation: 26262

Force Bootstrap navbar elements to be displayed horizontally

I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:

enter image description here

But are displayed as rows on a mobile device (obscuring content):

enter image description here

Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?

Sample: http://www.bootply.com/Fjq7ZXSDXc#

Upvotes: 1

Views: 3544

Answers (2)

vanburen
vanburen

Reputation: 21663

You can create a separate div inside the navbar-header: See example Snippet.

.navbar-header .nav-icons {
  padding-top: 12px;
  position: absolute;
  display: inline-block;
  top: 0;
}
.navbar-header .nav-icons span {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 20px
}
.navbar-header .nav-icons a {
  color: #fff;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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> <a class="navbar-brand" rel="home" href="#" title="Help"> Brand</a>

      <div class="nav-icons">
        <a href="#"> <span class="glyphicon glyphicon-home"></span>
        </a>
        <a href="#"> <span> Foo</span>
        </a>

      </div>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="text-center">
    <h1>Bootstrap starter template</h1>

    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div>
<!-- /.container -->

Upvotes: 3

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Try to add this in your .css

.nav-collapse .nav > li {
    display: inline-block;
}

Upvotes: 0

Related Questions