Bootstrap navbar dropdown displaying menu-items horizontally

Question

I've been working on a new project where a navbar required to be center of the page at top. I have the following html...

<div class="navbar navbar-inverse navbar-fixed-top center">

    <div class="container navbar-inner">

            <div class="navbar-header">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Toggle Navigation</span>

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

            </div> <!-- //.navbar-header -->

            <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li><a href="#home">Home</a></li>

                    <li><a href="#about">About</a></li>

                    <li><a href="#project">Project</a></li>

                    <li><a href="#resume">Resume</a></li>

                    <li><a href="#contact">Contact</a></li>

                </ul>

            </div> <!-- //.collapse -->

        </div> <!-- //.container .navbar-inner -->

</div> <!-- //.navbar -->

and css, which sets the menu-items to center.

html, body {
margin: 0;
padding: 0;
width: 100%;
}

.container {
    margin: 0;
    padding: 0;
}

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}

However the dropdown toggle function seems to display the options horizontally upon medium screen size . (can't post picture...not enough reputation~sorry!)

How can I get the dropdown toggle function to display menu-items vertically as a list (how the default should be) without affecting menu-items being centered on desktop screen size ? Any help would be appreciated!!

Answer 1

You should wrap your custom CSS code inside media queries.

@media (min-width: 992px) will affect the elements only in desktop screen size. Learn more about the Grid system

 html, body { margin: 0; padding: 0; width: 100%; } .container { margin: 0; padding: 0; } @media (min-width: 992px) { .center.navbar .nav, .center.navbar .nav > li { float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; } .center .navbar-inner { text-align: center; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top center"> <div class="container navbar-inner"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- //.navbar-header --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#project">Project</a> </li> <li><a href="#resume">Resume</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> <!-- //.collapse --> </div> <!-- //.container .navbar-inner --> </div> <!-- //.navbar -->