Building a responsive header navbar

1. Ensure that you have applied Autolayout for the header nav bar.

2. You should have both the desktop elements (menu links) and the mobile elements (hamburger) in the design.

Hide elements appropriately for different screen sizes

1. Select the container which contains the menu links

2. Tag this as a container using the Locofy Plugin

3. In the Styling & Layouts settings, select on the 768px tab and set the display setting to “hide”

4. Next, select the hamburger menu and tag it as a button

5. In the Styling & Layouts settings, set the display to “show” on the 768px tab, and set the display to “hide” on the default tab

6. You have successfully created a responsive header navigation bar