Changing Menu Icon MinCss


I wanted to make this pelican theme that is really light weight. I did some research and came upon mincss. Now this is a really small CSS framework that supports a wide range of browsers. For more info, check out here

I encountered a small problem however. I wanted to change my menu background colour. By default, micsss menu has a black backgroun and a menu icon that is white in colour.

So I thought they used an icon or image, only to find out mincss has this really neat treat of using borders. The following line shows its implementation:

.nav div:before {
    background: #000;
    border-bottom: 10px double;
    border-top: 3px solid;
    content: '';
    float: right;
    height: 4px;
    position: relative;
    right: 3px;
    top: 14px;
    width: 20px;

This code creates three lines with the border command thus the menu icon.

To make it appear well in my theme, ie. in a white background with black lines, I just changed the code to this.

.nav div:before {
    background: #fff;
    <!--everything else remains the same-->

I then added a bit of snippets on my own to make the background white.

    background: #ffffff;

And thus I had a menu I pretty much liked.