CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Bla...
Bla...

Reputation: 7288

Bootstrap - Fluid navbar items

I'm a newbie bootstrap user, currently I want to create a fluid navigation bar, but when I shrink the browser the navigation bar becomes weird.

Before shrinking:

enter image description here

After shrinking further:

enter image description here

As you can see, the second image is pretty bad.. One possible way I thought is to separate the words into 2 lines (e.g. line 1 - goto, line 2 - Hello_World!). Can anyone give me a better approach for this issue? Thanks in advance.

Current HTML code:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand logo-container" href="#"><img class="logo" alt="Logo" src="images/test.png" /></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="code">goto </span><span class="section-name">Hello_World!</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">About_Me</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Life_Graph</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Skill_Trees</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Feat_Stacks</span></a></li>
        <li><a href="#"><span class="code">goto </span><span class="section-name">Codetact_Me</span></a></li>
      </ul>
    </div>
  </div>
</nav>

HERE IS MY FIDDLE...

Upvotes: 2

Views: 14054

Answers (1)

murnax
murnax

Reputation: 1222

If my understanding for your quesetion is correct you can use .row & .col to block menu to new row

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="row">
      <div class="navbar-header col-sm-1">
        ...
      </div>
      <div class="col-sm-11">
        <div class="collapse navbar-collapse" id="myNavbar">
          ...
        </div>
      </div>
    </div>
  </div>
</nav>

You can change col-md-xx to make it wider or smaller

for more info http://getbootstrap.com/css/#grid

Upvotes: 6

Related Questions