CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Eoin Traynor
Eoin Traynor

Reputation: 599

Center Content of Bootstrap Navigation

I am trying to center the content of my navigation which uses bootstrap 3. I have tried a number of suggested solutions from similar questions like the css below, but alas no joy.

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}
<nav class="navbar navbar-default navbar-fixed-top">		  	
	<ul class="nav navbar-nav">
		<li><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
		<li><a href="/">Mr. Postman</a></li>
		<li><a href="/profile"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
	</ul>
</nav>

Upvotes: 1

Views: 57

Answers (2)

Parin Gandhi
Parin Gandhi

Reputation: 83

Remove the .navbar-collapse from your css:

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar {
        text-align: center;
    }
}

Upvotes: 0

hopkins-matt
hopkins-matt

Reputation: 2823

Bootply is a great place to find Bootstrap examples for stuff like this.

http://www.bootply.com/Q7pzI4ddjW

CSS:

@media(min-width:768px) {
    .center-nav{
        float: none;
        text-align: center;
    }
    .center-nav > li{
        float: none;
        display: inline-block;
    }
}

HTML:

<nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav center-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

Upvotes: 1

Related Questions