Building a responsive header navbar
- Ensure that you have applied Autolayout for the header nav bar.
![](/docs/image-7521@2x.png)
- You should have both the desktop elements (menu links) and the mobile elements (hamburger) in the design.
Hide elements appropriately for different screen sizes
- Select the container which contains the menu links
![](/docs/image-7522@2x.png)
-
Tag this as a container using the Locofy Plugin
-
In the Styling & Layouts settings, select on the 768px tab and set the display setting to “hide”
![](/docs/image-7523@2x.png)
- Next, select the hamburger menu and tag it as a button
![](/docs/image-7524@2x.png)
- In the Styling & Layouts settings, set the display to “show” on the 768px tab, and set the display to “hide” on the default tab
![](/docs/image-7525@2x.png)
- You have successfully created a responsive header navigation bar