CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrap-3
Thibaud Clement
Thibaud Clement

Reputation: 6897

Centered Bootstrap 3 nav-bar

Inside a Rails app, and using Bootstrap 3, we are trying to build a navigation, with the following features:

So far, this is our _header.html.erb partial layout file:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "App Name", root_path, id: "logo" %>
    <nav>
      <ul id="main_menu" class="nav navbar-nav navbar-left">
        <li><%= link_to "Features",   features_path %></li>
        <li><%= link_to "Pricing",   pricing_path %></li>
        <li><%= link_to "Blog", '#' %></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Sign In", '#' %></li>
        <li><%= link_to "Sign Up", signup_path %></li>
      </ul>
    </nav>
  </div>
</header>

EDIT: this is our generated HTML code:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <a id="logo" href="/">App Name</a>
    <nav>
      <ul id="main_menu" class="nav navbar-nav">
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Sign In</a></li>
        <li><a href="/signup">Sign Up</a></li>
      </ul>
    </nav>
  </div>
</header>

We tried the following CSS code:

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

#main_menu {
  margin: 0 auto;
  text-align:center;
}

#main_menu li {
  float:none;
  display:inline-block;
}

It did not work (did not change anything).

We also tried:

/* Code not reproduced for brevity */

#main_menu {
          width: 100%;
          text-align:center;
        }

        #main_menu li {
          float:none;
          display:inline-block;
        }

It did not work either, and even broke our layout:

enter image description here

How can we center the <ul id="main_menu" class="nav navbar-nav navbar-left">...</ul> navigation bar without breaking the layout?

Upvotes: 1

Views: 576

Answers (2)

R&#233;mi Delhaye
R&#233;mi Delhaye

Reputation: 824

You should use col-xs-X grid to do that, i've pasted you the working code here:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    .main_menu {
      width: 100%
    }

    .main_menu li {
      float:none;
      display:inline-block;
    }
  </style>
</head>
<body>
  <header class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
      <nav>
        <div class="col-xs-3">
          <a class="navbar-brand" href="/">App Name</a>
        </div>
        <div class="col-xs-6 text-center">
        <ul class="main_menu nav navbar-nav">
          <li><a href="/features">Features</a></li>
          <li><a href="/pricing">Pricing</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
        </div>
        <div class="col-xs-3">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign In</a></li>
          <li><a href="/signup">Sign Up</a></li>
        </ul>
        </div>
      </nav>
    </div>
  </header>
</body>
</html>

PS : Try to don't use id selectors in css, this is why.

Upvotes: 1

Cyzanfar
Cyzanfar

Reputation: 7136

Your navbar brand should be enclosed in a a tag. Change <%= link_to "App Name", root_path, id: "logo" %> to 

<a class="navbar-brand" href="<%= root_path %>">APP NAME</a>

Upvotes: 0

Related Questions