0

I have the following code for my navbar - it displays properly on desktop view, but as the screen gets smaller the menu items do not display correctly. What I see is the links stay up on the line where the brand is supposed to be. I haven't altered the bootstrap css file in anyway.

For a demo go here

<body>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <a href="#" class="navbar-brand">Philadelphia Mold Removal</a>

                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                    <div class = "collapse navbar-collapse navHeaderCollapse">
                        <ul class ="nav navbar-nav navbar-right">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Mold Testing</a></li>
                            <li><a href="#">Mold Removal</a></li>
                            <li><a href="#">Water Damage</a></li>
                            <li><a href="#">Blog</a></li>
                        </ul>
                    </div>          
                </div>
            </nav>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>
matthias_h
  • 11,356
  • 9
  • 22
  • 40
Steven
  • 5
  • 2

2 Answers2

2

This is covered in the Bootstrap navbar documentation:

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

  • Reduce the amount or width of navbar items.
  • Hide certain navbar items at certain screen sizes using responsive utility classes (.visible-* / .hidden-*).
  • Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
Community
  • 1
  • 1
cvrebert
  • 9,075
  • 2
  • 38
  • 49
0

Your navbar brand name is too long. You'll need a custom build where you specify @grid-float-breakpoint and @grid-float-breakpoint-max

See the Bootstrap customizer under "Grid system".

Alexander Langer
  • 2,883
  • 16
  • 18