Bootstrap dropdown menu align center

Question

I'm having trouble with putting in a container or to center align a dropdown menu. I can't see where the problem might by, i've tried all the options but can't make it work.

<nav class="navbar navbar-default navbar-static white">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="" class="logo"> <img src="template/img/10plus-logo.png" alt="10plus"> </a>
  </div>
  <div class="collapse navbar-collapse js-navbar-collapse">
    <div class="pull-right">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri elevi <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-large row">
            <li class="col-md-4">
              <ul>
                <li class="dropdown-header">Glyphicons</li>
                <li><a href="#">Available glyphs</a></li>
                <li class="disabled"><a href="#">How to use</a></li>
                <li><a href="#">Examples</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdowns</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Aligninment options</a></li>
                <li><a href="#">Headers</a></li>
                <li><a href="#">Disabled menu items</a></li>
              </ul>
            </li>
            <li class="col-md-4">
              <ul>
                <li class="dropdown-header">Button groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Button toolbar</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Nesting</a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Button dropdowns</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-md-4">
              <ul>
                <li class="dropdown-header">Input groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Checkboxes and radio addons</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Navs</li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Pills</a></li>
                <li><a href="#">Justified</a></li>
              </ul>
            </li>

          </ul>
        </li>
        <li class="dropdown dropdown-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri adulti <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-large row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Glyphicons</li>
                <li><a href="#">Available glyphs</a></li>
                <li class="disabled"><a href="#">How to use</a></li>
                <li><a href="#">Examples</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdowns</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Aligninment options</a></li>
                <li><a href="#">Headers</a></li>
                <li><a href="#">Disabled menu items</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Button groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Button toolbar</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Nesting</a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Button dropdowns</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Input groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Checkboxes and radio addons</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Navs</li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Pills</a></li>
                <li><a href="#">Justified</a></li>
              </ul>
            </li>

          </ul>
        </li>
        <li class="dropdown dropdown-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cursuri firme <b class="caret"></b></a>
          <ul class="dropdown-menu dropdown-menu-large row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Glyphicons</li>
                <li><a href="#">Available glyphs</a></li>
                <li class="disabled"><a href="#">How to use</a></li>
                <li><a href="#">Examples</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdowns</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Aligninment options</a></li>
                <li><a href="#">Headers</a></li>
                <li><a href="#">Disabled menu items</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Button groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Button toolbar</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Nesting</a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Button dropdowns</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Input groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Checkboxes and radio addons</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Navs</li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Pills</a></li>
                <li><a href="#">Justified</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown dropdown-large menu-phone">
        </li>
        <li class="dropdown dropdown-large menu-number">0348 808 909</li>
      </ul>
    </div>
  </div>
  <!-- /.nav-collapse -->
</div>

JSFiddle demo

Screen capture

What i want to do is to align to center the entire dropdown menu because the width of the dropdown menu is set to 100% and all the text is set from a corner of the browser to the other one. The thing that i want to achive can be seen [10plus.org/] take a look at the drop down menu.

Thank you in advance.

Please fix your JSfiddle demo so it actually shows the problem. — isherwood, Dec 07 '15 at 18:39
I've put a printscreen that shows the problem. can't manage to make the jsfiddle dropdown to work. — Rwi, Dec 07 '15 at 18:49
You haven't included jQuery or Bootstrap in your fiddle. Look at the JS options flyout. — isherwood, Dec 07 '15 at 18:52
I've fixed a few things with your fiddle, but I'm not sure what problem you're trying to solve. Please edit your question to clarify. http://jsfiddle.net/isherwood/xmgdLm55/5/ — isherwood, Dec 07 '15 at 19:04
What i want to do is to align to center the entire dropdown menu because the width of the dropdown menu is set to 100% and all the text is set from a corner of the browser to the other one. The thing that i want to achive can be seen [http://www.10plus.org/] take a look at the drop down menu. — Rwi, Dec 07 '15 at 19:12
You seem to be asking how to limit the width of the dropdown content to something other than 100%. Is that accurate? If you shrink the browser a bit your example site looks exactly like yours. — isherwood, Dec 07 '15 at 19:18
It looks like the OP wants the ditto nav bar as seen [here](http://www.10plus.org/) and hence my comment in my answer. — sandeep s, Dec 07 '15 at 19:20
Ok. Let's put it this way. I've put the website on the server. Now what what i have can be seen here http://www.10plus.org/beta/. What i want to achive can be seen http://www.10plus.org/ Take a look at the dropdown menu. — Rwi, Dec 07 '15 at 19:31
you r not following bootstrap grid system conventions. please follow this link: [link](http://stackoverflow.com/questions/19983857/when-should-i-use-class-container-and-row) — nowRails, Dec 07 '15 at 20:33

madalinivascu · Accepted Answer · 2015-12-07T20:07:43.803

0

Try this:

$('nav ul ul.dropdown-menu').removeClass('row fluid-container').addClass('container');
$(window).on('resize',function(){
  $('nav ul ul.dropdown-menu').css({padding:$('.container').css('margin')})
});

http://jsfiddle.net/7jkmfrjz/1/

edited Dec 07 '15 at 20:07

answered Dec 07 '15 at 19:02

madalinivascu

32,064
4
39
55

Have you understand what i need to do? [Ai inteles ce vreau sa fac? si ce nu functioneaza corect?] – Rwi Dec 07 '15 at 19:35
Da meniul ala de dropdown nu se aliniaza pe centru cum e pe website-ul din root, cu toate ca l-am inclus tot meniul in container. – Rwi Dec 07 '15 at 19:37
Can't make it work, where do you put the script from above? – Rwi Dec 07 '15 at 20:00
drop it at the bottom of the page in a script tag with a document ready function – madalinivascu Dec 07 '15 at 20:08

Bootstrap dropdown menu align center

1 Answers1