bootstrap navbar not adapting in container

Question

I need to put six menu items so I tried bootstrap navbar but its not fully adapting to full width in container.

This is what menu should have come http://s11.postimg.org/4rsxptslf/menu1.jpg

But this is what I got: http://s11.postimg.org/sy3l0yepv/gettingenu.jpg

My HTML code

<div class="row">
            <nav class="navbar navbar-default">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse plr" id="bs-example-navbar-collapse-1">

                  <ul class="nav navbar-nav menu">
                    <li><a href="#">EVENTS & PROMOTIONS </a></li>       

                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>PRODUCTION </span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">CORPORATE EVENTS</a></li>
                        <li><a href="#">EXHIBITIONS</a></li>
                        <li><a href="#">FASHIONS & BEAUTY</a></li>                      
                        <li><a href="#">CONCERTS</a></li>                       
                        <li><a href="#">TALENT ENTERTAINMENT</a></li>
                     </ul>
                    </li> 
                    <li class="dropdown-m">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">PRODUCTION <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">CORPORATE EVENTS</a></li>
                        <li><a href="#">EXHIBITIONS</a></li>
                        <li><a href="#">FASHIONS & BEAUTY</a></li>                      
                        <li><a href="#">CONCERTS</a></li>                       
                        <li><a href="#">TALENT ENTERTAINMENT</a></li>
                     </ul>
                    </li>
                    <li><a href="#">PRINTING & BRANDING</a></li>
                    <li><a href="#">ARTISTS & TALENT</a></li>
                    <li><a href="#">FASHION</a></li>
                    <li><a href="#">VIDEO/FILM PRODUCTION</a></li>
                  </ul>     

                </div><!-- /.navbar-collapse -->
            </nav>

            </div>

My CSS code I tried to override bootstrap

<pre>
.nav > li > a {
    font-size: 16px; padding: 16px 15.0281%;
}


.menu {
    text-align: center;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
}


.plr {
    padding-left: 0px;
    padding-right: 0px;
}
</pre>

I also tried

.nav > li > a {
   padding: 16px 29px;
}
.nav > li:last-child > a {
   padding: 16px 40.1px;
}

I'm making responsive site so I should desktop version correct first.

Do you have a link to that page where the buttons styled the same without margin gap? That way we can check the css there. Going from http://getbootstrap.com/examples/navbar/ it might just be lack of wrapper or style of buttons not matching — Daniel Brose, Jul 27 '15 at 06:02

score 1 · Accepted Answer · edited May 23 '17 at 11:44

@Arun - taking http://getbootstrap.com/examples/navbar/ as an example, you maybe missing a wrapper level, OR its the navbar background not matching.

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

If its the background

To know for sure, we really need a link to the page you screenshoted that showed what you 'did' want to achieve (with the buttons styled the same too) to rule out that the buttons styled different from navbar background.

It appears there is supposed to be a padding on both sides of navbar, so probably need to affect the navbar background so it doesnt stand out from the buttons - you do not want to break the layout of the navbar items themselves as it needs to stay responsive for all other use-cases too.

Or if you hate any padding on the sides

All bootstrap tables I saw have that padding on the sides, but plenty of people that have removed it too.

A very quick google search found a few of them:

bootstrap 3 navbar-right no padding with navbar-fixed-top

Bootstrap - Removing padding or margin when screen size is smaller

This one has a caveat: White right and left margins in Bootstrap navbar

If you really hated the padding, I would actually try looking for bootstrap theme that doesnt have it, and see what they did using F12 (developer console for Chrome, or similar for whatever browser you are using)

But before you start messing with override core bootstrap css, try simply making the background to match and see if that works for you.

Im working on local host and site is not online yet.. as per design ,, padding should be removed from both ends to fit container... — Arun, Jul 27 '15 at 06:42
Well, it isnt on any bootstrap table that i can think of, maybe because of rounding, or any other reason. Its not good form to mess with bootstrap core css, so instead try what i suggested and make the navbar background match the buttons, OR look elsewhere for style that has no padding — Daniel Brose, Jul 27 '15 at 06:48
ok daniel i will try and get back ... i used only gradient background not any image — Arun, Jul 27 '15 at 07:14
Thanks daniel .. I reworked on html by adding container below navbar-default and i adjusted padding-right and padding-left each 31px and it fitted perfectly . But its not working alone for safari .. breaks down little bit. — Arun, Jul 27 '15 at 11:59
@Arun - I can only refer you to the 'Browser Bug Wall' for bootstrap, maybe something there of interest, or maybe elsewhere: http://getbootstrap.com/browser-bugs/. There is js that can help you load a style only for a specific browser, such as http://stackoverflow.com/questions/17637846/how-do-i-add-a-css-line-only-for-safari, but again not recommended - you really should just try to take advantage of native cross-browser css and use minor tweaks 'around' bootstrap core styles, rather than overriding, as hard to test every device every resolution, incl. mobile — Daniel Brose, Jul 28 '15 at 02:23

score 0 · Answer 2 · answered Jul 27 '15 at 06:06

that is how navbar is designed to work. what you are trying to do is not the good approach to create a menu because there are varied number of screen sizes and browsers. Even if you somehow make it work(fit in the specified width) on your screen and browser, there are high chances it may break on some other screen.

bootstrap navbar not adapting in container

2 Answers2