5

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.

enter image description here

enter image description here

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

Anthony Russo
  • 913
  • 4
  • 13
  • 31
  • Can you show what it looks like @ [JSfiddle](http://jsfiddle.net) ? –  May 17 '14 at 05:48
  • 1
    Only when you show the code and the demo using it, we will be effectively able to debug. :) – Praveen Kumar Purushothaman May 17 '14 at 05:49
  • possible duplicate of [How do I horizontally center an absolute positioned element inside a 100% width div?](http://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-a-100-width) – bjb568 May 17 '14 at 06:55

7 Answers7

5

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

web-tiki
  • 99,765
  • 32
  • 217
  • 249
4

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>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
1
<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>

Kisspa
  • 584
  • 4
  • 11
1

Here is a rough example of what you're looking for: http://jsfiddle.net/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.

Community
  • 1
  • 1
willanderson
  • 1,458
  • 12
  • 13
  • This won't work. The menu is floated to the right your is not. Yours also uses a set width, this menu could be bigger or smaller in size depending on the number of links. I need a dynamic approach. If this means using js that's fine. – Anthony Russo May 19 '14 at 21:29
  • That doesn't make any sense. There is no set width, only a max-width on `.main-navigation-wrapper` (which you can remove). The sub-menus are centered, which is what you requested. What do you mean by floated right? – willanderson May 19 '14 at 21:37
  • The .main-navigation-wrapper has the float property applied to it. It is floated right. I agree I want the sub menus centered but when you float the wrapper that's what messes it up. So that's what I am trying to work around. – Anthony Russo May 20 '14 at 03:44
1

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. :-)

abir_maiti
  • 490
  • 3
  • 9
  • This only aligns it center of the .main-navigation-wrapper. – Anthony Russo May 21 '14 at 15:23
  • You gave the dropdown a width of 1140px. I assume your container also has same pixel width. As there were no container defined in your example, I gave `.main-navigation-wrapper` a width to show you how to do it. You can always remove the width. – abir_maiti May 22 '14 at 05:03
1

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.net/YzJ4h/4/

Rohit Rana
  • 43
  • 6
0

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

style="margin:0 auto;"
  • @ Anthony Russo if you give exact piece of code then someone will help becoz its not a big issue –  May 17 '14 at 06:22
  • add on parent div float this to right and use one morew inner div to width 50% and margin:0 auto; got it –  May 17 '14 at 06:25
  • i trying to solve it if got i will send you u can take the refence from here also http://www.datainfovision.com/ –  May 17 '14 at 06:32
  • Use #menu-item-600 .clearfix{left: -230px;} it will work not a good solution but you can use this –  May 17 '14 at 07:08
  • 1
    I know how to css hack it but I am looking for a dynamic approach. – Anthony Russo May 17 '14 at 07:09