I want to have the class="children" centered in the middle of the page container preferably using css only but if it is not possible you can provide the best js answer. Currently it is just a normal drop down but I want to use it as a mega menu. If I have to add another div structure that's fine.

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

I have seen some other examples but have attempted a few and none of them center it. I want to find a dynamic approach to where no matter the location of the link in the menu it always centers the menu in the container.

EDIT: Fiddle found here /

I want to have the class="children" centered in the middle of the page container preferably using css only but if it is not possible you can provide the best js answer. Currently it is just a normal drop down but I want to use it as a mega menu. If I have to add another div structure that's fine.

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

I have seen some other examples but have attempted a few and none of them center it. I want to find a dynamic approach to where no matter the location of the link in the menu it always centers the menu in the container.

EDIT: Fiddle found here http://jsfiddle/YzJ4h/

• javascript
• html
• css

Share Improve this question Follow edited May 20, 2014 at 3:46 Anthony Russo asked May 17, 2014 at 5:47 Anthony RussoAnthony Russo 93144 gold badges1616 silver badges3232 bronze badges 3

• Can you show what it looks like @ JSfiddle ? – user3117575 Commented May 17, 2014 at 5:48
• 1 Only when you show the code and the demo using it, we will be effectively able to debug. :) – Praveen Kumar Purushothaman Commented May 17, 2014 at 5:49
• possible duplicate of How do I horizontally center an absolute positioned element inside a 100% width div? – bjb568 Commented May 17, 2014 at 6:55

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5 +50

The simplest would be to add this CSS to horizontaly center your mega menu items :

CSS :

#menu li, .second-menu li {
    display:inline-block;
    position:relative;
}
#menu > li.mega_width {
    display:inline-block;
    position:static;
}
#menu > li.mega_width > .children {
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:auto;
}

DEMO

Do a small change in your code:

<div class="main-navigation-wrapper">
    <div class="nav pull-left">
        <div class="menu-main-menu-container">
            <ul id="menu" class="menu no-dropdown" style="margin: auto;">
                <li class="menu-item">
                    <a href="#">Blog</a>
                    <div class="children">
                        --- Children items are here
                    </div>
                 </li>
             </ul>
         </div>
    </div>
</div>

<div class="main-navigation-wrapper">
<div class="nav pull-left">
    <div class="menu-main-menu-container">
        <ul id="menu" class="menu no-dropdown" style="margin: auto;">
            <li class="menu-item four">
                <a href="#">Blog</a>
                <div class="children">
                    --- Children items are here
                </div>
             </li>
         </ul>
     </div>
</div>

Here is a rough example of what you're looking for: http://jsfiddle/m8Vj4/

A couple main tips:

1. position:absolute; / position:relative;

   position:absolute will position something relative to its nearest parent that has position:relative. In your case you are positioning the .children elements relative to their parent li, whereas you want them to be positioned relative to .main-navigation-wrapper

2. Centering an element with display:inline-block;

   You can center elements with display:block by adding margin:0 auto, however this won't work for elements with display:inline-block. Instead, you can set text-align:center on their parent, and text-align:left on themselves so they don't inherit centered text.

Hope that helps... reworking your existing HTML/CSS would have taken too much time.

I took some liberty and added some CSS in your existing code. Those are -

.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}

#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}

Here is a fiddle.

Hope it will work for you. :-)

You can made certain modifications in your code. Like to avoid scrollbar in children div you have to use width:auto , and some position settings. Please do check with the code below. It may help you.

.menu-main-menu-container ul#menu .children {
    left: 0;
    position: absolute;
    width: auto;
}

.menu-main-menu-container ul#menu .children:hover {
    visibility: visible;
}

.menu.no-dropdown {
    position: relative;
    position:static;
}

Modify class

#menu li, .second-menu li{
    position:static;
}

For the inner sub menus inside the children div,

.menu-main-menu-container ul#menu .children .children {
    position: relative;
}

You can please check it on fiddle

http://jsfiddle/YzJ4h/4/

Give it Width something like 50% to you outer div and set margin:0 auto;

style="margin:0 auto;"