April 10, 2024
When designing a website in Showit you want to make sure you are designing not only the desktop but also the mobile version, so that your website will be displayed perfectly on different screens. Designing a navigation bar for your mobile website version is not difficult but you need to be aware of a few aspects in order for it to function properly.
1. Designing a header that includes a hamburger menu
When you design the mobile version of a website your header will usually look something like this:
There will be a logo and a hamburger menu (the 3 horizontal lines). In my case I also have the German and the Spanish flag, so users can switch easily between the 3 different languages my website is in. But normally your header will probably just be a logo and hamburger menu. So, your first step would be to design such a header.
2. Mobile navigation canvas
When you see such a header on the mobile version of a website you expect some sort of dropdown menu or something similar to open up, that lets you navigate between the different pages of the website. It usually looks something like this:
To create that, you need to design a mobile navigation canvas. Go to your “Home” page of your website. We will create the mobile navigation canvas at the very bottom of this page, and we will make it a site canvas so you can easily add it to every single page of your website.
3. Creating a new canvas
Firstly, you need to create a new canvas by clicking on the 3 dots. Name your canvas something like “Mobile navigation”:
Make it visible on mobile only and convert it to a site canvas:
Adjust the following setting:
- Set the stacking order to 2. This will ensure your mobile navigation is displayed on top of everything else.
- Adjust the initial hight of your canvas to your desired hight.
- Set the sticky setting to “top”.
- Click on “Hidden to start”. You don’t want your mobile nav to open until it is prompted to do so by clicking on the hamburger menu:
4. Designing the mobile nav canvas
Now that you got the basic settings right it’s time to design your mobile nav the way you like. If you don’t want a background colour you can set the canvas background colour settings to 0% and simply add a box like the beige one in my example here:
5. Adding click actions to all the menu options
In your newly created menu you have all the different menu option that lead your website visitors to the different pages within your website (e.g. Home, About me, Portfolio, and Contact). These need to be linked in a certain way so that visitors are led to the correct page. Click on “Home” and then “Click Actions” and set the Type to “Page” and the page to “Home”. This ensures that when your page visitors click on “Home” they are sent to the Home page of your website. However, you also want the mobile navigation canvas to close when somebody clicks “Home”. This is achieved by going to “Actions” and adding “Hide Site Canvas” and “This Site Canvas”:
Set the same click actions for all your other page (e.g. About me, Portfolio, and Contact).
The “X” next to the logo needs the correct click actions as well. When you click on it you expect the mobile navigation menu to close. To achieve this, click an the “X” and add the following click actions:
6. Linking the header
You are almost done! There is only one last thing left to do. You need to link the hamburger menu so that it will open up the mobile nav canvas when clicked on. To do so, click on your header and link the hamburger menu like so: Set the Type to “Show Site Canvas” and the Site Canvas to “Mobile nav” (or whatever you called your mobile navigation canvas:
And that’s it. You’re all done with your mobile navigation! 🙂 Now, you only need to add the site canvas to all of your website pages.
