A Web Design & Development Blog

Nav Combine

Using Javascript to detect screen width, I was able to combine two navigation menus into one navicon.

The need to do this arrived after a few extra nav items where added to a freelance site I was working on, and we need to use an off screen menu for mobile and tablet. The problem was, we were using wordpress and menu widgets.

Using Javascript to detect the screen width, a class is added to the header and main nav div is prepended to the sub nav and a checkbox is added to header.

See the Pen Nav Combine by pollardld (@pollardld) on CodePen.

Leave a Reply

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