How to create a responsive navbar

This article will focus more on the structure and functionality of a responsive navbar instead of styling.

Structure of a responsive navbar
Additional settings
Adding interactivity with custom code

Below is the structure of a responsive navigation menu with created in our Playground.

Responsive navbar structure

The Navbar has 4 child elements:

The Logo on the left side of the Navbar container
The Nav that contains all the links
The BurgerMenu, that will only show up when the screen size is small enough.
The MobileMenu, that is placed outside of the boundaries of our Navbar, as you can see in the screenshot below (the one that is selected).

By placing the MobileMenu outside of the Navbar you can remove/overwrite the "transform: translateX(100%)" property from the mobile menu at click on the BurgerMenu, creating a slide in effect.

Please keep in mind that creating the MobileMenu animation can be done in multiple ways, we just chose the translateX property as it gives the MobileMenu a slide in effect.

Additional settings

For this to work properly we need to handle 2 things inside the project:

Show/Hide certain elements for different media queries:

> 767px - BurgerMenu will have display: none.
< 767px - The Nav container will have display: none and we will be showing the Hamburger Menu instead by setting display: flex for this specific Media Query.
> 1200px - The** MobileMenu** will have transform: translateX(100%) ; transition: 0.3s (for the sliding effect to be animated)

Make the interactive navbar elements targetable in the script.

The BurgerMenu - Add a custom HTML attribute to it, data-type: BurgerMenu
The MobileMenu - Add a custom HTML attribute to it, data-type: MobileMenu
The CloseMobileMenu ( this is the "X" inside of the mobile menu that when clicked will slide the MobileMenu to it's initial position) - Add a custom HTML attribute to it, data-type: CloseMobileMenu

Adding data-type custom property

Adding interactivity with custom code

Now to make everything come together you will need to add the following code to the project. Go to Project Settings -> Custom Code -> Body and paste the code below.

<script>
window.onload = () => {
	//Attaching an event listener that reacts at clicks in your page
          document.addEventListener("click", (e) => {
            e.stopPropagation();

	//Helper function that tells us if the click happened on the element we want.
            const isClickedElementByDataSetProp = (prop, value) => {
              return e
                .composedPath()
                .map((element) => {
                  return element.dataset ? element.dataset : null;
                })
                .find((target) => {
                  return target && target[prop] === value;
                });
            };

	//Targeting our MobileMenu and storing it inside a variable
            const mobileMenu = document.querySelector('[data-type="MobileMenu"]');

	//Check if the click was on the BurgerMenu
            if (isClickedElementByDataSetProp ("type", “BurgerMenu”)) {
              mobileMenu.style.transform = "translateX(0%)";
            }

	//Check if the click was on the CloseMobileMenu item
            if (isClickedElementByDataSetProp("type", “CloseMobileMenu”)) {
              mobileMenu.style.transform = "translateX(100%)";
            }
        };
}
</script>

Alternative way

There is also a simpler way to make this work.

If you start a project from one of our templates, or create a project from blank and you add all of the data-types to the BurgerMenu, MobileMenu and CloseMobileMenu correctly and make sure that all of these elements are children of the Navbar element, you can simply add this script.

<script src='https://unpkg.com/@teleporthq/teleport-custom-scripts'></script>

To test if your header works as intended you will need to publish your project or export and run it locally.

Updated on: 24 / 06 / 2022

Was this article helpful?

Thank you!