Styling lists

Inside a SPAN or A in a list, you can basically add any HTML to create rich content. For example, lets add a thumbnail and an extra line of text.

<nav id="my-menu">
   <ul>
      <li>
         <span>
            <img src="path/to/alan.png" />
            Alan<br />
            <small>Thompson</small>
         </span>
      </li>
      <li>
         <span>
            <img src="path/to/anne.png" />
            Anne<br />
            <small>Cook</small>
         </span>
      </li>
      <li>
         <span>
            <img src="path/to/carolyn.png" />
            Carolyn<br />
            <small>Garcia</small>
         </span>
      </li>
   </ul>
</nav>

Write some CSS to style this new markup...

.mm-listview li span {
   font-size: 16px;
}
.mm-listview li span small {
    font-size: 12px;
}
.mm-listview li span img {
   border-radius: 50px;
   width: 50px;
   height: 50px;
   margin: -5px 10px -5px -5px;
   float: left;
}

...and a bit more to indent the item border with the text.

.mm-listview li:after {
    left: 75px !important;
}

Change the colors

By default, the menu comes in a beautifully balanced light theme. If you want to change the colors in the menu, feel free to override the CSS.

.mm-menu .mm-navbar > a,
.mm-menu .mm-counter {
   color: blue;
}

If you're looking for a more solid way to change the colors, check out the SCSS colors documentation.

Change the item sizes

All sizes in the menu can easily be overridden with basic CSS.

.mm-listview > li > a,
.mm-listview > li > span {
   padding-top: 20px;
   padding-bottom: 20px;
}

If you're looking for a more solid way to change the sizes, check out the SCSS variables documentation.

Next up:
Thumbnail grid