CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
user3377206
user3377206

Reputation: 135

Bootstrap CSS Navbar Overflow

I have an issue when the navbar components all have really long texts. What happens is that the navbar expands vertically and overlaps with site content.

I want the navbar not to expand and instead the content's overflow to be hidden.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
    <p class="navbar-brand">Brand Title</p>
  </div>  
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Looooooooonnnnnngggg Text</a></li>
        <li><a href="#about">Longggggggggggggggggggg Text</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Loooong Text</a></li>
      <li><a href="#contact">LongText</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Reallyyyyyyyyyyyyyyyyy  Looooooooooooooooooooonnnnnnnnngggg Text</a></li>

    </ul>
  </div>
  </div>

Upvotes: 3

Views: 11877

Answers (2)

Jonas Petersson
Jonas Petersson

Reputation: 715

You can solve it by using a fix width for the a tags.

ul li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

The result: http://jsfiddle.net/j47cn28u/

Upvotes: 1

isherwood
isherwood

Reputation: 61083

@media (min-width: 768px) {
    nav.navbar { 
        max-height: 60px;
        overflow: hidden;
    }
}

Demo

Upvotes: 0

Related Questions