- This topic is empty.
February 7, 2014 at 10:02 am #162171
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.
- child item1
- child item2
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.February 7, 2014 at 10:10 am #162173Paulie_DMember
We’d need some code…perhaps in Codepen?
Here’s something to get you started: http://codepen.io/Paulie-D/pen/FEukzFebruary 10, 2014 at 10:36 am #162450
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.February 10, 2014 at 10:56 am #162455
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:
As you’ll see, its under the slider image when you hover over about, product, or artworks.February 10, 2014 at 6:56 pm #162538
It seems that the menu works perfectly in Chrome, but I use Firefox to develop (firebug), so I have problems.February 11, 2014 at 10:37 am #162612
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 (.).February 11, 2014 at 10:40 am #162613
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>February 11, 2014 at 11:23 am #162614
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.February 11, 2014 at 12:24 pm #162617
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.February 13, 2014 at 5:18 pm #162859
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?
- The forum ‘CSS’ is closed to new topics and replies.