CODEWITHSUNDEEP
htmltwitter-bootstrapcss
n0de
n0de

Reputation: 155

(bootstrap) How to align navigation on the same line as the header (logo)

This is what I have so far: (using bootstrap)

 <body>
    <div class="container">
        <div class="page-header">
            <h1>Title <small>Secondary Text</small></h1>
            <ul class="nav nav-pills navbar-right">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="register.html">Register</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>

The page-header creates a horizontal line and I want the navigation menu above that line, aligned on the right and the title on the left. For some reason it keeps going below the horizontal line.

I tried using div container-fluid, but the title jumps up and isn't resting on the horizontal line at that point.

All help is appreciated. Thank you.

Upvotes: 4

Views: 2684

Answers (2)

Sai Pavan
Sai Pavan

Reputation: 183

It's a small problem with you tag wrapping. You have wrapped all elements under the page-header.This is your first mistake. The starting div must be page-header and then followed by container in which h1 and ul elements are present.

Second mistake is when you tried to pull ul the elements to the left.There are no elements that are pull to right. Because of this the browser thinks it as a new line instead of the same one.Therefore, you need to wrap the h1 with a div with class pull-left.

This would work according to your wish.

<body>
  <div class="page-header">
    <div class="container">
        <div class="pull-left">
                <h1>Title <small>Secondary Text</small></h1>
        </div>
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="register.html">Register</a></li>
            <li><a href="login.html">Login</a></li>
            <li><a href="#">Contact Us</a></li>

            </ul>
        </div>
    </div>
</body>

Upvotes: 3

andreas
andreas

Reputation: 16946

You can use display: flex; on your .page-header to position the elements next to each other.

With flex: 1; on h1 and .nav both get the same amount of space from the viewport width (50%). Of course you can adjust this value for your needs. On small viewport widths you will have to adjust the styles, e.g. with media queries.

.page-header {
  display: flex;
}

h1,
.nav {
  flex: 1;
  vertical-align: top;
  margin-top: 0 !important;
}

.nav {
  text-align: right;
}

.nav.nav-pills>li {
  float: none;
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
    <h1>Title <small>Secondary Text</small></h1>
    <ul class="nav nav-pills">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="register.html">Register</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>

Upvotes: 3

Related Questions