This section examines the Header building block and reviews different layouts that are available.
The header area of the site is usually used to display the navigation bar, logo, signin/signup , and can include other functionality depending on the nature of the site. Softr has several header layouts with different types of links and buttons that can be customized according to your requirements. Here are the layouts that we currently provide:
Header with sublinks and button
Header with links and buttons
Header with hamburger menu
Header with sublinks, icon and description
Let’s discuss the common features and how the block works in general, and then we’ll review the specific features of each layout separately.
All the layouts have a Logo field that can be removed or changed by clicking on it. You can upload an image or choose one from the library.
Buttons and Links
Apart from the logo, there are Buttons and Links, which can also have Sublinks that appear within a dropdown opened when hovering over or clicking the link. Each layout has certain links and buttons by default, but you can add as many as you wish.
The links have a text area to enter the link name and an Action, which can be set to Open Page, Scroll to section, or Open external url.
A Sublink can be added to the link by clicking on the field menu and choosing Add sublink.
Adding a sublink
After adding a Sublink, the Action field of the link disappears, as its only action now is to display the sublinks. The Sublink element appears under the link with similar text and action fields.
Buttons have a configuration similar to that of Links, but there's also a Sign Out option that can be used if you have Memberships set up.
Show User Profile
This option is typically used to show a user profile icon with a dropdown to logged-in users. By default, you have the Sign Out action (can be removed), but you can add as many additional options as needed (e.g. a link to a My Profile page).
Show User Profile option
You can see how this option is applied in this tutorial on setting up Memberships.
Lastly, there is the Always show the header on top of the screen option. When enabled, the header will become sticky and will stay on the screen when scrolling down.
As with other blocks, the design is fully configurable, and you can change the background color of the header, link color, logo size, and so on (as shown in the example below).
Editing header styles
That's it for the overview. You can explore each layout in greater detail in the subsections of this article.