CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andrew Button
Andrew Button

Reputation: 109

Can't make top navbar FULL width

Disclosure: I tried finding the solution to this question in the stack exchange archives but nothing worked.

I'm trying to create a nav bar that spans the full width of the page in bootstrap.

I can't do it.

I've tried doing this with col-md-12 classes, new classes I created myself, and navbar-static-top. None of them work. There's always this weird 10px or so of margin on the left and the right of the navbar. It really seems to me like there is padding in some parent element or one of the divs that contains the nav bar but I can't for the life of me find it.

Also worth nothing: the rest of the page is col-md-12 and doesn't have this problem.

Here are some CSS elements that might be relevant. I've sized basically everything to 100% width.

containing/parent elements

html {
font-family: Impact;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
width: 100%;
margin: 0%;
padding: 0%;
}

body {
margin: 0%;
padding: 0%;
height: 100%;
width: 100%;
background-image: url(../images/background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.container {
padding-right: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
height: 100%;
width: 100%;
}

.container-fluid {
padding-right: 0%;
padding-left: 0%;
margin-right: auto;
margin-left: auto;
height: 100%;
}

.col-md-12.alpha {
height: 100%;
width: 100%;
}

Attempts at creating the navbar itself

  .col-md-12.beta {
  background-color: black;
  height: 10%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  }

  .navbar1 {
  background-color: black;
  opacity: 0.4;
  height: 10%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  }

.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
background-color: black;
min-height: 10px;
}

Upvotes: 1

Views: 1152

Answers (1)

Yonatan Vainer
Yonatan Vainer

Reputation: 453

Just take your <nav class="navbar navbar-default navbar-static-top"> outside your main div container in the body. I know that a container must wrap all bootstrap elements.. Well, it's not. Even in their own examples of templates they take away the <nav> directive outside.

Don't forget to put everything inside the navigation into a container:

<body>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      ...
    </div>
  </nav>
  ...
</body>

Upvotes: 1

Related Questions