CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Edward Tanguay
Edward Tanguay

Reputation: 193302

How to get Bootstrap Navbar to appear on one line in the xs layout?

I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.

enter image description here

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Company Name</a>
            </div>                
            <ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
                <li class="active"><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>                    
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Settings 1</a></li>
                        <li><a href="#">Settings 2</a></li>
                        <li><a href="#">Settings 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Settings A</a></li>
                        <li><a href="#">Settings B</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Menu A</a></li>
                        <li><a href="#">Menu B</a></li>
                        <li><a href="#">Menu C</a></li>
                    </ul>                        
                </li>
            </ul>

            <div style="display:none" class="navbar-collapse">
                <p class="navbar-text  fix_navbar_left_larger">Company Name</p>
                <p class="navbar-text fix_navbar_left_xs">Company Name</p>
                <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
                <p class="navbar-text visible-sm-block visible-md-block visible-lg-block"><a href="#"></a></p>
                <a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
                    <span class="glyphicon glyphicon-menu-hamburger"></span>
                </a>
                <a class="navbar-brand navbar-brand navbar-right" href="#">
                    <span class="glyphicon glyphicon-cog"></span>
                </a>
            </div>                        
        </div>
    </nav>

    <div class="pagecontent">
        <p class="visible-xs-block">seen on xs screens.</p>
        <p class="visible-sm-block">seen on sm screens.</p>
        <p class="visible-md-block">seen on md screens.</p>
        <p class="visible-lg-block">seen on lg screens.</p>
    </div>

</div>

Upvotes: 2

Views: 5686

Answers (3)

CZorio
CZorio

Reputation: 483

Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.

See Fiddle

For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.

Upvotes: 4

Leo the lion
Leo the lion

Reputation: 3065

For this you have to play with pull-left pull-right classes of bootstrap.

See my fiddle

Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)

Upvotes: 1

BrainHappy
BrainHappy

Reputation: 432

try adding pull-right to those two <li class="dropdown"> classes

Upvotes: 1

Related Questions