Header and Logo
Use settings from the following section to customize the Header and Logo in your store.
Last updated
Use settings from the following section to customize the Header and Logo in your store.
Last updated
Note! The header options described below can be used only on desktop view!
Type on large screens
These settings provide options to change the feel and look of the Header section. Choose one of the pre-design types in the drop-down: "In one line, logo left"; "In one line, logo center"; "In one line, logo and menu left"; "In two lines, logo left"; "In two lines, logo center".
In the following examples, you can view each of the header types:
Note! The sticky header works on all pages except for the "Products" and "Collections" pages.
Use the options described below to configure the sticky header appearance on the desktop view.
In the "Type" drop-down, one can specify whether to display the sticky header while scrolling down or up from the bottom of the page by selecting one of the required options:
"Full section". This option ensures the whole header is displayed according to the header type used in the "Type on large screens" drop-down.
"Text menu". Use the option to display the Secondary navigation menu with the Logo in the sticky header, avoiding showing the Icons menu.
"Icons menu". Unlike the previous option, this setting shows only the Icons menu in the sticky header.
If you want to add a logo scaling below the header before scrolling down or to the very top of a page, use the options below. If you are using the following settings, make sure that the "Show picture logo" option is enabled in the current section.
Note! The full-width logo feature works only on the Home page.
Using this option changes the header type on the main page.
"Full section with fullwidth logo". Let you display the whole header in a sticky mode according to the header type used in the "Type on large screens" drop-down.
The "Full section with fullwidth logo" can be viewed on the DEMO.
"Text menu with fullwidth logo". Choose the option to get the sticky header for the Secondary navigation menu and the logo animation.
To hide the sticky header, use the "Disable" option.
Enable on mobile
Activate the option to use the sticky header on mobile.
Hide sticks header when scrolling down
This option disables the sticky header when scrolling down on all screen sizes. However, the feature still works when scrolling up.
Tip: The "SVG logo", "Logo image", and "Custom logo width" settings will be applied for both desktop and mobile. Check if these settings work well for desktop and mobile in your store.
If you want to substitute the text logo in the Header with an image or SVG logo and display the full-width logo in the Header or Footer on the Home page, activate the option.
To display an SVG logo, paste the SVG code to the input field:
Here you can press the "Select image" button and choose an image from the library or upload it from your computer.
Use the slider to control the logo size in the Header from 20 to 300 pixels. This option works for the SVG logo and image on the desktop.
Change the logo size on mobile from 0 to 280 pixels using the provided scale.
You can control the full-width logo size on the scale. Here you can apply changes from 0 to 2000 pixels, where 0 pixels means disabling the limit of the logo width and 2000 pixels - the logo will be displayed at the whole screen width.
Here is how the settings display in a store:
Use the given scale to set the delay time, up to 100 milliseconds, for the logo to appear beneath the Header when scrolling down from the top of a page.
Operating this option will ensure a smoother transition of the logo to full-screen mode due to a time delay.
Note! This option works with the sticky header layout - Fullwidth logo. If you disable the full-width logo in the "Sticky header" drop-down of the Layout section, the theme will replace the date with the logo.
The option works only on the Home page. By default, the date will be replaced with the logo on other pages.
Place the current date in the header by adding the variable [date] to the field. The option can be used on a desktop only. To disable the option, leave the field empty.
Here is how the option displays in a store:
