CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Lehmann
John Lehmann

Reputation: 8225

How to absolutely position Bootstrap navbar within div without wrapping

I'm trying to overlay my navbar onto a background image. The way I'm doing this is nesting it within a div, and using absolute position. However, the navbar-header/navbar-brand portion causes the rest of the navbar to wrap onto a new line.

Here's the example: https://jsfiddle.net/qjxszebe/

I realize there are some other options about creating the background image, but I'd like to understand why this simple approach doesn't work.

What I want is the fiddle above to be fixed such that the navbar is on a single line as you'd expect, not two lines.

Solution: Here's the working fiddle with the width: 100%: https://jsfiddle.net/69yhavtj/

Upvotes: 2

Views: 7051

Answers (1)

JMF
JMF

Reputation: 1113

Adding width:100% in your CSS navbar is in the same line, not the bar low.

You should add your image in the class="img-responsive" class since your image is not reponsive the way they have done

   .navbar {
      position: absolute;
      top: 0px;
      width: 100%;
    }

Upvotes: 5

Related Questions