Steve Price Steve Price - 11 days ago 6
CSS Question

Adjust mega menu li responsively so that li's reduce equally

I've been scratching my head with this one for a while. I need to make a ul li menu reduce width responsively. At the moment the last li wraps to another line as the screen width is reduced. Whilst I've managed to do it on one of my menus, the same type of css won't work on this as the li contents are not equally sized. I did find a fiddle from a previous SO question, but trying that method it completely breaks the styling of the dropdown for "Shop By Products"

I'm trying to achieve something like this as the viewport is reduced.
http://jsfiddle.net/au9muz43/
where the css is very simple as

.horizontal-style {
display: table;
width: 100%
}
.horizontal-style li {
display: table-cell;
}
.horizontal-style a {
display: block;
border: 1px solid red;
text-align: center;
margin: 0 5px;
background: #999
}


I've set up a fiddle with a large chunk of my css and html here: https://jsfiddle.net/1Le63xk0/1/

Even adding

display:table-cell;


to my css line

.mega-menu li{float:left;text-align:center;position:relative;margin-right:15px;border:none;}


breaks the dropdown layout for the Products

Answer

So a quick combining of the two fiddles, I noticed that some of the styles conflicted. I removed your display:block calls on the li / a, and made them display:table-cell; (which is the reason why it will shrink, instead of drop to a new line.

Brought all your css over, this was just a case of fixing certain divs that were still styled as block/inline-block and converting them to table formats.

The main issues were found in these lines:

.mega-menu li a{color:#fff;outline:0;padding:12px 35px 0px 0px;text-decoration:none;display:block;font-weight:normal;text-transform:uppercase;}

.mega-menu li:hover a{color:#007dc5;position:relative;z-index:11;padding:4px 11px 3px 11px;}

Where you had a large amount of padding that was pushing each div.

Here is the JSFiddle.

Edit: Updated just to bring more of his css over.

Edit 2: Still getting downvoted, there literally is no other way to explain it other than, double checking OPs display properties. OP hasn't responded explaining something is wrong with the fiddle, so as far as I can see, it has everything he asked for: A shrinking nav, with his dropdowns working the same.

Comments