ajmajmajma ajmajmajma - 1 year ago 68
HTML Question

bootstrap "mega-dropdown" centering main menu nav items

I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.

Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .

This works perfectly, however I need those main menu items (home, about, etc..) to be centered.

My first thought was to

them, however this causes some screwy behaviour with the sub menu.

IF I add

.desktop-nav {
text-align: center

.menu {
display: inline-block

I get the desired centered effect, however the sub menu is confined the the small center size of the
, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .

Any idea of how to fix this to get desired effect? Thanks!

Answer Source

You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.

.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;

.menu > ul > li {
  display: inline-block;
  padding: 5px;
  margin: 0;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download