Simple Navicon CSS

View the Simple Navicon CSS Demo

The Navicon is the 3 horizontal line mobile menu symbol used to indicate a mobile menu toggle option. The CSS typically used to generate these icons is fairly complicated, with absolutely positioned before/after pseudo elements used to achieve the triple border.

Here is the most simple navicon CSS currently available. It will generate a perfect navicon without the extra bloat. Eliminating the pseudo elements not only makes the css more simple, but you gain backwards compatibility with older browsers (you know, just in case your mobile site loads on grandma’s 640×480 Compaq Presario). If you find an easier & better way, let me know in the comments.

View the Demo

The CSS:

The view this navicon within a real mobile menu, check out this simple mobile menu system tutorial.

One thought on “Simple Navicon CSS

Leave a Reply

Your email address will not be published. Required fields are marked *