The Header contains the first set of visible elements when your website loads. You can arrange the elements such as logo, navigation menu, and social icons in the way you like them to appear in the Header.
In this article:
You can manage the Header styling (for both desktop and mobile) from the Design (1) section.
Once you are inside the Design section, click on Header (2) tab.
Alternatively, you can also use the studio’s search option.
- Enter Header (1) in the Search Bar.
- From the related results, click on the Design- Website Header option (2).
Header for Desktop
- Header Layout – Check the currently applied header layout for the desktop version. Click on the Change Layout button to choose from the available header layout options, and apply to your website.
We provide two types of header layouts – top header layouts, and two-column header layouts. The two-column header layouts exist in themes like Burst, and Isle. - Width – Specify the header width as Full Width or Site Width.
‘Full width‘ will display the header while covering the entire width without leaving any margin.
‘Site width‘ can be specified in the Design section. You can specify a fixed-width here.
It will display the header by adhering to the fixed-width specified. Know more. - Vertical Padding – Add space (top and bottom) to your website header (specified in vh). Know more.
- Behaviour – The position of your desktop header can be set to Fixed (here the header will be fixed on the top, i.e, even if the page scrolls, the header would be visible) or Scroll With Site (here the header will scroll along with the page).
- Sticky Navigation – Enable or Disable the sticky navigation in case of the Scroll With Site header position.
For sticky navigation, header will show after initial section is scrolled half on the screen
Check out header padding in action:
Have a look at a Header on a live site.
See different desktop header layouts
See different 2-column desktop header layouts
Search based Header layouts which focuses on Website Search
Header Border
- Border: Enable or disable the border for header.
- Thickness: Specify the width of border lines for the header.
- Position: Set the position of header border. You have four options – All sides, Top & Bottom, Top only, and Bottom only.
Header for Mobile
- Layout – Check the currently applied header layout for the mobile version. Click on the Change Layout button to choose from the available header layout options, and apply to your website.
- Add Vertical Space (top and bottom) to your website header on mobile devices (specified in vh).
- After making the changes, click on Publish button.
See different mobile header layouts
- Dot symbol in mobile header refers to the Customer Accounts.
- It will only appear the Customer Account option is enabled in store. Learn more.
Types of Header
You can choose from four different types of headers:
Normal Header
The normal header layout features a clean and straightforward design with a logo, navigation links, social icons, and menu button displayed horizontally. It’s ideal for providing a classic and user-friendly browsing experience.
Two-Column Header
The two-column header layout divides the header into two distinct sections, allowing for a logo and social icons on the left or center and the navigation menu and other items of the header on the right as a clickable sidebar.
This layout is perfect for websites that need to emphasize both their brand and important actions simultaneously.
Search-based Header
The search-based header layout prominently includes a search bar, making it easy for users to find specific content quickly. This design is especially useful for content-heavy websites where search functionality is a primary focus.
Pill Shaped Header
The pill-shaped header layout features rounded edges and a modern, sleek design that gives the header a distinct, stylish appearance. This layout works well for contemporary websites looking to convey a sense of elegance and innovation.
To apply the Pill-shaped layout, select the layout demonstrated in the screenshot.
Once the Pill-shaped layout is applied, following options will appear:
- Corner Radius – Specify the corner radius to add curved edges to the header.
- Top Padding – Specify the top padding to add space above the content in the header.
- Bottom Padding – Specify the bottom padding to add space below the content in the header.
Header Elements
- Logo / Site Title – The very first element of the site header is the site logo/title. Set the site title/upload the site logo for your site.
Note: If you have not uploaded the site logo, the site title would appear on your site header. Also, if you have provided both, then the site logo will be visible on your site header. - Menu – Another element of the site header is the menu (menu links). You can sequence the site navigation links, or delete/hide any menu item from your site.
- Social icons – You can add the Social icons that are connected to your social media profiles to your site header. You can upload a social sharing image that will be used as a thumbnail when the website or any of the website pages are shared on social media. Also, choose where the social media icons would show up on your website. The available positions are header, footer, both, or none.
- Search box – Add a search box that lets your site visitors search for any content in Products (if you have a Store enabled on your website), Images, Blog Posts, and Pages (Galleries, Folders, and other pages) to your site header.
- Cart icon – Add a floating cart icon that’s easy to reach and always visible without interfering with your website to your site header.
- Menu button – Add a menu button to your site header i.e., a call-to-action button that redirects to a specified URL. You can specify the Label and the URL for the Menu Button. Also, choose the Button size to be Small, Medium, or Large.