Add a space between two blocks only on large screens
Header blocks
The theme's header can have multiple Blocks 
. Each block represents a header item (logo, hamburger menu, etc.)
Add blocks
- Go to the Theme editor
- Click on the Header section, and click on
Spacer
Spacers add space to one side of any other block on the header. The following examples show some scenarios in which you can use the spacers:
Pay attention to the visibility option. Make sure to set the visibility option correctly, so the layout does not break.
Add a space between two blocks only on large screens
For example, you have the Logo block and a Panel Menu block, and you want to add a space between the two blocks, but you do not want to have the space.
- Add a Spacer block
- Move the Spacer block between the Logo and the Panel menu.
- Change the Visibility option to "On large screens" in the Spacer block settings.
Panel menu (Hamburger menu)
The Panel menu block provides a hamburger menu trigger on the header that opens a menu panel. Each menu panel can have up to two menus inside, one primary menu and one secondary menu.
Add two different panel menus
- Go to the Theme editor
- Select the Header section and add two Panel menu blocks
- for each newly added Panel menu, select a different menu in the block settings, by clicking on "Select menu"
- Set the Visibility option for the first Panel menu to "On larger devices"
- Set the Visibility option on the second panel menu to "On smaller devices."
Logo
The Logo block in the header section only allows the arrangement of the logo in the header.
The Logo image and size can be defined in the Header section setting, not in the Logo block settings. The Logo block on the header section is only for arranging the position of the logo on the header.
Use an SVG for the logo
- Go to the Theme editor
- Select the Header section.
- Copy your SVG code to the clipboard. make sure the SVG code is valid ( Starting with <svg> and ends with </svg>).
- Paste the SVG code in the Logo SVG field in the Header section settings.
List menu
The list menu is limited to one on the header section, however, more list menus can be added below the header in the List menu section, below the header section.
In most cases, when the List menu has more than a few items and will not fit properly on smaller devices.
Therefore, make sure to change the Visibility of the List menu block to
On smaller screens