‍

Building a custom navigation for your website is a super nice way to set it apart from the competition as well as inject the brand style through every single element. When it comes to mobile navigation, there are a lot of opportunities to add style and personality into a portion of the site that are frequently visited by users. Learning to step away from the out of the box solutions gives you more freedom and room to explore.

So we are essentially building the desktop and mobile nav as two separate elements, and hiding and showing based on the screen sizes and breakpoints. Have Desktop Nav Wrapper visible from the Desktop down to Tablet, then switching to our Mobile Nav Wrapper (hamburger) menu from Horizontal Phone on down. Then on top of everything we have our Mobile Overlay div, which will contain our links within the mobile navigation and that's the element that shows on top of everything else when the hamburger menu is engaged.

For the Mobile Overlay, we basically want that hidden all the time until the hamburger menu link is clicked. Using Webflow Interactions we can easily hide and show this div upon clicking that item. When building this entire interaction of hiding / showing the menu and making the menu animation, it can all be done with one (complex) interaction applied to our Mobile Link or hamburger menu item. Using the manually built divs for the hamburger menu and ensuring the position is set to Relative and is the highest z-index of all the elements on the page it will always be visible and always be there to trigger our menu opening and closing. Adding some moves and rotations to the hamburger menu divs and some easing to our menu opacity transition it’s not too hard to make a super-slick mobile navigation.

Watch the video above for a much more in-depth view of how each of these items is done within Webflow.