How to Edit Magento Mobile Megamenu with CSS Columns

A common feature of eCommerce sites is the “Megamenu,” which contains a large number of links and other rich content arrayed in columns. Here’s an example of the megamenu used in the Ultimo theme for Magento:

The Ultimo theme has a fairly typical megamenu solution that is built into the Catalog » Categories area. It’s based on a rigid but adaptable model in which the areas of the megamenu are defined by dividing space between a fixed number of columns—in Ultimo’s case, 12.

In the above example, the subcategory links are allocated two-thirds of the available space, while the right block is given one-third. The Number of Columns With Subcategories field is left blank because we’re using the default value of 4. This way, the megamenu spreads the subcategories between four available columns.

Megamenus are useful for desktop browsers because they contain a lot of navigation options in a relatively small space. But for mobile browsers, the menu is typically reduced to a standard single-column accordion list. When there are many navigation links, this can translate into a lot of scrolling.

Pretty It Up with CSS Columns

Fortunately, CSS offers an elegant solution for breaking that vertical flow a bit: CSS Columns. The concept is very simple: The column-count property is applied to the parent element (in this case a <ul> list, and it breaks the child elements into the specified number of columns.

#mainmenu ul {
    column-count: 2;
}

Support for CSS columns was slow in coming and used to require some browser-specific prefixes, but nowadays the rule is supported by every modern browser.

The result is a mobile menu in which the links are now divided into two columns:

As you can see, though, there’s a problem. By default column-count will do its best to split the child content evenly between its columns, which in this case means that the lists are breaking mid-menu. That might be fine for some kinds of content, but with menus we want every link to appear under its correct heading. To solve this, we’ll apply a rule to the list items that will prevent content from breaking inside them:

#mainmenu ul li {
        break-inside: avoid;
        page-break-inside: avoid;
}

At the time of this writing, break-inside is supported by every major browser except Firefox, which requires page-break-inside.

Let’s look at the result:

You can see that the columns are not as uniform, but links all appear under their proper headings. Now we have a nice mobile submenu that, in our example, now displays all its items on one screen. 

One last thing that we’ll want to do is establish a breakpoint to make sure that if the menu is being viewed on a teeny-tiny screen, it remains in a single column. To do that, we’ll nest the style in a @media rule:

@media screen and ( min-width: 375px ) {  
  #mainmenu ul {
    column-count: 2;
  }  #mainmenu ul li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

Nice, But Where Do I Add the Styles?

At this point, you may be wondering where this snippet of styling code actually goes. If you have FTP access to Magento’s files, then you probably know what to do. The styles can be included in a new custom stylesheet if one hasn’t already been added for your theme. 

If not, Magento includes an area for you to add styles and scripts into the head of your website directly from the admin dashboard. It can be found in Content » Design: Configuration. Look for the Default Store View of the website that you are customizing and under Actions, select Edit.

Next, open the HTML Head tab and look for the Scripts and Style Sheets field. Add opening and closing <style> tags and paste the CSS styles inside of it. The end result should look like this:

Now, select Save Configuration and flush Magento’s cache. Voila! The styles are applied.

CSS Columns are an excellent tool for creating horizontal content; it flows more smoothly than floated elements and in some cases can handle child content better than flexbox. We’ve used it to spruce up our mobile menu, but it’s easy to imagine that for some sites, CSS Columns could be a good choice for the desktop megamenu as well. Experiment with it and let us know how it works for you!