The header is the top section of a site. It is where you find your site title, main and secondary logo, social icons, in-site search, and navigation links. The Zoomforth header editor has two options - the Old Version and New Version - which we will be discussing in this article.
Both versions allow you to modify, display, or hide the header contents on your published site. The customizable header contents are:
Show header - select to display site header
Show title - select to display the site title in the header
Show search - select to enable and display in-site search
Display secondary logo - select to display the secondary logo in the right side of the header. You can either select the secondary logo from the Media Library, or get the web URL through Public Hosting to add it. The secondary logo can be adjusted using the two values below:
Background-size - allows you to specify the size of the secondary logo using one of four options:
auto - the image is displayed in its original size
cover - scales the image so that the content area is completely covered. Both its width and height are equal to, or may exceed the content area
contain - scales the image to be as large as possible, but both its width and its height must fit inside the content area (recommended)
manually enter a specific percent or pixel value (i.e. 80% or 100px)
Position - sets the position of the secondary logo to center, left, or top aligned
Show social links - select the box to enable social links. Choose the individual target social network/s (Facebook, Google-Plus, Glassdoor, Instagram, LinkedIn, Twitter, and YouTube) and paste the relevant link
Comparing the Old vs New Version
You have the option to use either the Old Version or the New Version of the Header Editor.
The Old Version requires custom CSS to customize various header elements (e.g. alignment, layout, etc.). The New Version allows you to customize the header layout and style directly in the header editor without custom CSS.
The New Version has two tabs, Layout and Content, which we discuss in detail below.
The Layout tab allows you to customize the header by selecting its style, bleed, and navigation layout. The Layout tab controls the following:
Show header - select to display the site header
Header Style - select to display the logo and navigation on the same line. Ticking the Inline box will make the logos and navigation inline, which only takes up as much width as necessary.
Header Bleed - select Full Bleed to display the header across the entire width of the page without padding, margins, or borders.
Navigation Layout - select your header navigation alignment: right, center, or left.
The Content tab allows you to customize the header contents as described above. This tab contains most of the header contents that can be customized from the Old Version which were discussed in detail in the first part of this article.