bootstrap “mega-dropdown” centering main menu nav items

Question

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 inline-block 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 ul , 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 1

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;
  text-align:center;
}

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

http://codepen.io/Founded1898/pen/amREJm

Answer 2

I have found the solution to this:

.desktop-nav {
  margin-left: 50%;
}

.menu > ul > li > ul {
  margin-left: -50%;
}

If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%} and assign it to the <nav> tag.