In today’s digital world, it’s important to make sure your website looks and works well on all devices. Responsiveness is key to creating a seamless user experience, whether your visitors are viewing your site on a desktop, tablet, or smartphone. Carrd makes it easy to create responsive websites that automatically adapt to different screen sizes and orientations.
Tweaking the header
Here we will show you how to change the header to a more mobile friendly one.
Steps:
1) Duplicate the header:
2) Change the visibility of both headers: One for desktop and the other for mobile.
We will now make a new section that will serve as a mobile dropdown.
3) Duplicate an existing “Section break”: If you want to learn more about section breaks and and scroll points take a look at our guide.
4) Change the name and drag the header buttons from the top to here:
5) Add an Icon: This will serve as an exit from the dropdown.
- Change the URL: Changing it to”#” will act as a homepage button.
We will also add an icon to the mobile header that will serve as the dropdown button.
Drag it to the desired position and change the URL to “#mob-nav” or the name you have chosen.
You can see how your page will look if you click on the “mobile’ icon from the menu.
Alternatively if you like coding you can use something like this:
And the final result should look like this:
Conclusion
Making sure your Carrd site is responsive and providing a consistent and user-friendly experience across all devices is important. A responsive design not only enhances the beauty of your website but also increases accessibility and efficiency, helping to engage visitors and reduce bounce rates.
Best of luck with your responsive site!
