Header section
Last updated
Last updated
There are three navigation menu arrangement types in the Viola theme’s header section.
The header customizations are as follows:
Layout
Customization of logo position in the header section is as follows:
Logo left, menu center
Logo left, menu bottom
Logo center, menu bottom
Logo left, menu left
Color scheme
In this section, you can change the background color of a section using the color scheme.
Accent 1
Accent 2
Accent 3
Background 1
Background 2
Logo image
Use "Logo image" to add an image in the Header.
Desktop logo width
Use "Desktop logo width" to customize the logo size in the header section. You can set a Minimum width "50px" and a maximum width "250px" can be given.
Mobile logo
If you want to add a separate logo for mobile devices, add a logo here.
Mobile logo width
Use "Mobile logo width" to customize the logo size in the mobile devices in the header section. You can set a minimum width "50px" and a maximum width "170px" can be given.
Search
Button type Customization of search button type in the header section is as follows:
Search icon
Search label
Account
Customization of account icon and text in the header section is as follows:
Account icon
Account icon with text
Menu
Show submenu in dropdown format By enabling this checkbox, you can see submenu in dropdown format. This feature not applicable when megemenu blocks enabled.
Customization of 'Submenu dropdown open from' in the header section is as follows:
Left
Right
Color scheme
In this section, you can change the background color of the section using the color scheme:
Accent 1
Accent 2
Accent 3
Background 1
Background 2
Menu dropdown color
In this section, you can change the background color of the dropdown using the color scheme:
Accent 1
Accent 2
Accent 3
Background 1
Background 2
Menu
Click on "Select menu" to add a menu in the header section.
Secondary menu
Click on "Secondary menu" to add a secondary menu in the header section.
Icon with text
Add extra information text about your store:
Icon
Text
Link
Sticky header
Customization of Sticky header in the header section is as follows:
None
On scroll up
Always
Always, reduce logo size
