Twitter Bootstrap - full width navbar

Question

Following the example of TB  I have a navbar that is marked up as follows    lt div class  container  gt       lt div class  navbar  gt           lt div class  navbar-inner  gt                      lt  -- nav bar items here -- gt           lt  div gt       lt  div gt   lt  div gt    I d like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar   I can t seem to find how to do this in TB  If there isn t a way  what CSS would I need to override TB and not break responsiveness

User · Answer

Not sure if the navbar-static-top class was available prior to version 2 2 2 but I think you can accomplish your goal with the following    lt div class  navbar navbar-static-top  gt       lt div class  navbar-inner  gt           lt ul class  nav  gt               lt li class  active  gt  lt a href     gt Test1 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test2 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test3 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test4 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test5 lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt   lt div class  container  gt           lt  div gt    I put together a jsFiddle as an example

User · Answer

Put the navbar out of your container    lt div class  navbar  gt       lt div class  navbar-inner  gt                  lt  -- nav bar items here -- gt        lt  div gt   lt  div gt   lt div class  container  gt    lt  div gt    EDIT    Here is one that I did with responsive navbar  The code fits the document body        lt div class  navbar navbar-fixed-top  gt           lt div class  navbar-inner  gt           lt div class  container  gt              lt  --  btn-navbar is used as the toggle for collapsed navbar content -- gt             lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt  a gt              lt  -- Be sure to leave the brand out there if you want it shown -- gt             lt a class  brand  href     gt Project name lt  a gt               lt  -- Everything you want hidden at 940px or less  place within here -- gt             lt div class  nav-collapse  gt             lt  --  nav   navbar-search   navbar-form  etc -- gt             lt ul class  nav  gt                 lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt                 lt li class  divider-vertical  gt  lt  li gt                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt                 lt li class  divider-vertical  gt  lt  li gt                 lt li gt  lt a href     gt Link lt  a gt  lt  li gt               lt  ul gt             lt ul class  nav pull-right  gt               lt li gt  lt a href     gt Log out lt  a gt  lt  li gt             lt  ul gt             lt  div gt              lt  div gt           lt  div gt        lt  div gt     lt div class  container  gt       lt div class  row  gt         lt div class  span12  gt          lt  div gt       lt  div gt       lt  div gt   lt  -- end container -- gt     lt script type  text javascript  src   assets js jquery-1 8 2 min js  gt  lt  script gt     lt script type  text javascript  src   assets js bootstrap min js  gt  lt  script gt

User · Answer

You need to push the container down the navbar    Please find my working fiddle here http   jsfiddle net meetravi aXCMW 1    lt header gt        lt h2 class  title  gt Test lt  h2 gt   lt  header gt   lt div class  navbar  gt       lt div class  navbar-inner  gt           lt ul class  nav  gt               lt li class  active  gt  lt a href     gt Test1 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test2 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test3 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test4 lt  a gt  lt  li gt               lt li gt  lt a href     gt Test5 lt  a gt  lt  li gt            lt  ul gt       lt  div gt   lt  div gt   lt div class  container  gt    lt  div gt

User · Answer

I know I m a bit late to the party  but I got around the issue by tweaking the CSS to have the   width span 100   and setting l r margins to 0px      div id       margin-left  0px      margin-right  0px      width  100

User · Answer

Just replace  lt div class  container  gt  with  lt div class  container-fluid  gt   which is the container with no margins on both sides   I think this is the best solution because it avoids some useless overriding and makes use of built-in classes  it s clean

User · Answer

You can override some css  body       padding-left  0px  important      padding-right  0px  important      navbar-inner       border-radius  0px  important      The  important is needed just in case you link the bootstrap css after your custom css   And add your nav html out of a  container

User · Answer

Put your  lt nav gt element out from the  lt div class  container-fluid  gt    Ex  -   x000D   x000D   lt nav gt  x000D         nav content goes here x000D   lt nav gt  x000D   x000D   lt div class  container-fluid  gt  x000D     lt div gt  x000D              other content goes here x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just change the class container to container-fullwidth like this     lt div class  container-fullwidth  gt

User · Answer

You have to add col-md-12 to your inner-navbar  md is for desktop  you can choose other options from bootstrap s list of options   12 in col-md-12 is for full width  If you want half-width you can use 6 instead of 12  for e g  col-md-6      Here is the solution to your question        lt div class  container  gt          lt div class  navbar  gt             lt div class  navbar-inner col-md-12  gt                  lt  -- nav bar items here -- gt             lt  div gt          lt  div gt      lt  div gt

User · Answer

To remove the border-radius on the corners add this style to your custom css file        navbar-inner         -webkit-border-radius  0  -moz-border-radius  0  border-radius  0

User · Answer

I m very late to the party but this answer pulls up top in Google search results   Bootstrap 3 has an answer for this built in  set your container div in your navbar to container-fluid and it ll fall to screen width   Like so    lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt     lt div class  container-fluid  gt       lt div class  navbar-collapse collapse  gt         lt ul class  nav navbar-nav  gt           lt li gt  lt a href     gt More Stuff lt  a gt  lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt

[css] Twitter Bootstrap - full width navbar

Examples related to css

Examples related to twitter-bootstrap

Examples related to navbar