Horizontally centering a menu to full width with vertical child items

[powermaniac1]

I don’t know what was wrong with my other account, but it wouldn’t let me post to the forums. No error or anything when I’d submit :(. Anyway, this one seems to be working.

Hello, what I need is a horizontal menu that’s 100% width. I was able to do this by setting the main ul to display:table, and the main li’s to display:table-cell. When I say “main”, i mean the “main” menu items, not the children. My issue was that the children items (vertical dropdown) doesn’t work anymore. It doesn’t show at all. I’ve tried overriding those to display:inline-block, as the css for the ul and li were trickling down to them.

• item1
  • child item1
  • child item2
• item2
• item3

If you need more sample code from me, I can try to send that, but it’s all over the place at the moment, as I’ve been trying so many different ways. Thanks.

[Paulie_D]

We’d need some code…perhaps in Codepen?

Here’s something to get you started: http://codepen.io/Paulie-D/pen/FEukz

[powermaniac1]

First off, thanks for the help Paulie_D. I was able to modify your codepen after awhile to see what my issue was. My code was very similar to yours, except I had padding on my list items
* … I removed the padding, as well as a float:left that I had applied (earlier I was using a different display type, and it was causing a gap between the items, which was fixed by floating left).
Everything scales pretty well now, but I’m still having the issue with the child items now showing up.

http://codepen.io/anon/pen/oCtpg

My problem is essentially with the sub-menu class. I noticed that the CSS for the parent item ul and li's were "trickling" down and affecting them as well, so I tried forcing the sub-menu items to be display:inline-block, but it didn't help anything. As soon as I kill the display:table and table-cell, everything goes back to normal. Is it possible to have both display types working in conjunction? I feel like theres an issue with them.

[powermaniac1]

Ok Paulie, I messed around with some things a bit and have the submenu showing up, but it’s WAY out of place, lol. Here’s a link to the site:

http://69.195.124.79/~laartexc/dev/

As you’ll see, its under the slider image when you hover over about, product, or artworks.

[powermaniac1]

It seems that the menu works perfectly in Chrome, but I use Firefox to develop (firebug), so I have problems.

[noahgelman]

The problem is that Firefox will not properly position an absolute element inside a relative element if the element has display:table-cell.

Since it’s too much trouble to switch the list-items’s back to block I would just wrap the the link and sub-menu together in another element, and make THAT element position relative. That should solve your problems.

As a side note, I see that some of the list-item styles are styled with the “.main-navigation” element. Please note that any style written under “#menu-main_menu” will overwrite “.main-navigation” styles (even though “.main-navigation” is the larger element. This is because it’s written with an id (#) as opposed to just a class (.).

[noahgelman]

Here is example of what I was talking about above

<ul id="menu-main_menu">
  <li>
    <span class="rel-wrap">
      <a>LINK</a>
      <ul class="sub-menu">
        <!-- blah blah -->
      </ul>
    </span>
  </li>
</ul>

[powermaniac1]

Hi Noah,

First off, thanks for the response. I don’t know that I can add the rel-wrap class to the menu. I forgot to mention that this is in WordPress, and using the main menu. It’s for a client, so it needs to be able to be edited easily by them. When you say that it would be too much trouble switching li back to block, I assume you’re referring to the child menus (sub-menu)? Maybe that’s the only solution I have, but I’m not so sure how I’d make it work, as I’ve tried forcing the sub-menu class to display:block, and no dice.

[noahgelman]

When I was talking about switching the li back to block, I was talking about the top level navigation items. Right now they’re set to table-cell, which is why your sub-menu isn’t showing up on hover.

The only problem I see is that the top li items are set to display:table-cell.

You have 2 options.

Switch top level li items to display:block or to change the wordpress main menu to include an element inside the top level li items that wraps around the link and sub menu.

And of course you can add the to the menu. It’s a wordpress site, you can just alter the html that displays the main menu.

[powermaniac1]

Hi Noah,

I have tried this, but unfortunately, it isn’t working for me in firefox. I could switch the parent items back to block, but I wouldn’t know how to get the whole menu to be 100% width and centered. Any other ideas for that?

[Author]

Posts