0

I am using magento 1 and I am trying to set up my menu to have sub menus that are in columns, not one long list. This is what css code I'm currently using is

.jewelry {
  float: left;
  width: 33.33%;
  padding: 100px;
}

/* Clear floats after the columns */
.row:after {
  display: table;
  clear: both;
}

which is in : httpdocs / skin / frontend / theme / default / css / homeDesign.css and then I updated my layout.xml with

<action method="addItem"><type>skin_css</type><file>css/homeDesign.css</file></action>

and my html code in my block for the menu is:

<li class="dropdown"><a href="">Label</a>
<ul class="dropdown-menu row">
  <div class="jewelry">
   <li><a href="">thing</a></li>
   ...
  </div>
  <div class="jewelry">
    <li><a href="">thing</a></li>
    ...
  </div>
  <div class="jewlery">
    <li><a href="">thing</a></li>
    ...
  </div>
</ul>
</li>

But, when I update my site with this I get a jumbled mess. All the columns stack on top of each other. What should I do to fix this?

1

It's incredibly hard to tell without seeing your codebase as there could be other CSS affecting this.

If all you want to do is sit the columns side by side it's as simple as:

.dropdown-menu {
  display: flex;
}

I would recommend asking this on https://stackoverflow.com/ as it's a CSS question that isn't really related to Magento.

  • I put this on magento because I wasn't sure what else would be affecting it. (i.e. the wyiwyg editor/theme overrides etc) but I'll try this! – Morgan Smith Jun 5 at 15:34
  • 1
    It could be any CSS that loads so it's hard for us to assist, the CSS you've written looks like it should work. The only issue that may occur is if you don't have box-sizing: border-box; set on .jewelry the additional padding could break the layout. – Ben Crook Jun 5 at 16:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.