Bootstrap navbar link text breaks down in google chrome but not in firefox

Question

I have a navbar in bootstrap setup, it works fine in firefox but i google chrome. The nav links text which as multiple words like 'contact us' the second word goes down. How do I fix this problem, its weird in mozilla even when window is resized the word does not break

---

HTML

<nav class="navbar navbar-default">
            <div class="container-fluid">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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 class="active nav-links"><a href="#">Home<span class="sr-only">(current)</span></a></li>
            <li class="nav-links"> <a href="aboutus.html">About Us</a> </li>
            <li class="nav-links"> <a href="whoweare.html">Who We Are</a> </li>
            <li class="nav-links"> <a href="mission.html">Mission</a> </li>
            <li class="nav-links"> <a href="activities.html">Activities</a> </li>
            <li class="nav-links"> <a href="gallery.html">Gallery</a> </li>
            <li class="nav-links"> <a href="donate.html">Donate</a> </li>
            <li class="nav-links"> <a href="sitemap.html">Sitemap</a> </li>
            <li class="nav-links"> <a href="contactus.html">Contact Us</a> </li>

          </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>

CSS

 nav {
                width: 100%;
                height: 40px;
                background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                border-radius: 6px !important;
                -moz-border-radius: 6px !important;
                color: white
            }

        .navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a {
            color: white;  /*Sets the text hover color on navbar*/
            padding-right: 22%;
            font-size: 1.2em;
        }


        .navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
            color: white;  /*Sets the text hover color on navbar*/
            text-decoration: underline;
        }

        .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
         a:hover, .navbar-default .navbar-nav > .active > a:focus {
            background: none;
            color: white;
            text-decoration: underline;
        }

Answer 1

You can use white-space: nowrap; to prevent text wrapping and you may want to use the following:

1) You don't need to reset the height of your navbar. 2) You can use a media query to change the padding so your links won't wrap to a new line as the viewport is reduced

See example Snippet.

.navbar.navbar-default {
  width: 100%;
  background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
  background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
  background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
  border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  color: white
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a {
  color: white;
  /*Sets the text hover color on navbar*/
  font-size: 1.2em;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: white;
  /*Sets the text hover color on navbar*/
  text-decoration: underline;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  background: none;
  color: white;
  text-decoration: underline;
}
@media (max-width: 992px) and (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li > a {
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
  }
}

<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-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a>

        </li>
        <li> <a href="aboutus.html">About Us</a> 
        </li>
        <li> <a href="whoweare.html">Who We Are</a> 
        </li>
        <li> <a href="mission.html">Mission</a> 
        </li>
        <li> <a href="activities.html">Activities</a> 
        </li>
        <li> <a href="gallery.html">Gallery</a> 
        </li>
        <li> <a href="donate.html">Donate</a> 
        </li>
        <li> <a href="sitemap.html">Sitemap</a> 
        </li>
        <li> <a href="contactus.html">Contact Us</a> 
        </li>
      </ul>
    </div>
  </div>
  <!-- /.container-fluid -->
</nav>

Answer 2

I've had success with the no break <nobr> tag but that's not really a best practice. Can also use the inline white-space: nowrap property in CSS.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr