To set the expressive header style, navigate to your website admin, browse to Appearance > Customize > Header > General, from the header style dropdown, select Expressive.
Additional Header Settings for the Expressive Style
Enable Transparent Header
If you want to use the expressive style and use a transparent header instead. That’s possible too. You can use this setting to adopt a transparent header.
Simply click over the checkbox next to “Enable Transparent Header” under the General tab to activate it.
Enable Sticky Top Section
The sticky concept is when you scroll the page, the top section of the header snaps to the screen and stays fixed. That’s why we call it sticky.
You can choose to make the top section of this header sticky. Just click over the checkbox next to “Enable Sticky Top Section” label to enable it.
Enable Sticky Menu
You might as well want to make the menu sticky. You can do so by checking over the checkbox for “Enable Sticky Menu” to activate sticky for the menu.
Top Section Settings
If you want to apply a unique background color to the top section of the header, you can do so too!
Just click over the “Select Color” button under the Background Color label in General tab to choose the desired color.
When everything seems perfect, there exist certain times when you want to reposition the elements of the header. You can reposition these elements such as the logo, search form, social buttons, and functions menu.
To reposition the elements, simply click and drag the elements over each other. That’s it, publishing the page will save the positioning permanently.
If you need more space around the top section, you can give it a top and bottom padding to make the top section more spacious.
To do so, you need to fill the top and bottom input boxes with a number to add padding to the top and bottom respectively. The third button chains these two input boxes together. If you click the third button and enter a number for either the top or bottom padding. The same number would automatically be copied to the other input box.
Sticky Padding (px)
If you want to add more space towards the top and bottom of the sticky, you can do so too! You will just have to use the given top and bottom input boxes the same way, under the Sticky Padding label in General tab.
You can further customize the menu settings for the expressive header style as follows:
While the menu is independent in its own section, you can choose to align it to left, center or right.
Only click over the left, center or right button underneath the “Position” label under the menu section in General tab to select a relevant alignment for the menu.
You may want the menu to look a little compact or expand it to put maximum focus over the menu. Whatever your use case may be, you can easily increase or decrease the height of the menu.
Just use the slider to choose the desired height under the “Height” label in menu section inside the General tab.
Menu Items Padding (px)
If you find your menu items congested or maybe to suit your business and design needs. You can easily increase space (padding) between the menu items.
You can do so by clicking over the two input boxes, under the “Menu Items Padding (px) label inside the General tab. The first input is for the right side spacing whereas the next one is for the left side spacing. The third chain button is to link the first two input boxes together.
So if you want to keep same left and right side padding, you can click this button and enter any padding number in any of the two input boxes. It will then automatically update the other input box.
You can customize the slightest of design aspects with Avoori. You can even change the menu background bar color to suit your design.
Just click over the “Select Color” button under the “Background Color” label in menu section inside the General tab.