How can I center
in nav

Question

I have this code and I want center the buttons of nav, especifically Page1,2 and 3. I use boostrap 3.

html{
    font-family: 'Nunito', sans-serif;
}

nav{
    opacity: 0.8;   
}

.navbar-default{
    background-color: #ff4000!important;   
    font-family: 'Nunito', sans-serif;
}

.navbar-default a{
    color: white!important;   
}

.navbar-default .active a{
    background-color: dimgrey!important;   
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

<head>
 <title>title</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="js/scripts.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" href="css/index.css"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>

<body>
    
   
    
<nav class="navbar navbar-default" role="navigation">

      <div class="container-fluid">
            <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            
            <div class="collapse navbar-collapse" id="myNavbar">
                  <!--This is the <ul> that I want center, especifically, the buttons "Page1,2 & 3"-->
                  <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="dropdown">
                              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                <li><a href="#">Page 1-1</a></li>
                                <li><a href="#">Page 1-2</a></li>
                                <li><a href="#">Page 1-3</a></li>
                              </ul>
                        </li>
                      
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                  </ul>

                  <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                  </ul>
            </div>
  </div>
   

</nav>

</body>

</html>

I have been looking many pages for solve this and I test so many things, I hope that someone could help me.

Note: I want that content in center for a Full Page – Ati Que Timporta Oct 17 '16 at 18:10 — Ati Que Timporta, Oct 17 '16 at 18:10

score 0 · Accepted Answer · answered Oct 17 '16 at 18:12

0

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

http://codepen.io/anon/pen/VKGONw

answered Oct 17 '16 at 18:12

HendrikEng

654
1
10
32

No worries, pleasure :) – HendrikEng Oct 18 '16 at 18:30

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Possible duplicate of Center the nav in Twitter Bootstrap

See this jsfiddle - http://jsfiddle.net/7cGea/1/

Basically, you need the navbar and li's to be inline blocks without float, then center the inside

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block
}

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

edited May 23 '17 at 10:27

Community

1
1

answered Oct 17 '16 at 18:16

Qrchack

899
1
10
20

How can I center in nav

2 Answers2

How can I center
in nav