Farro and Haute share the same underlying structure and functionality. This guide applies to both templates.
This guide explains some of the most common issues that may come up when using the Farro and Haute templates.
How do I move my header elements?
The header is split into three areas: left, center, and right. Each area can contain any or all of the header elements (navigation links, site title or logo, tag line, social icons, search bar, and shopping cart).
From the Home Menu:
- Click Design.
- Click Style Editor.
- Scroll down to the Header: Layout section.
- Use the Position tweaks to determine where each element displays, or to hide them.
- Use the Layout tweaks to set each of the three header areas to display horizontally or stacked.
My header is displaying over my Blog Page or blog post
This style is set in the Style Editor.
If your Blog Page or blog posts are set to Full Bleed and your Blog: Design Alignment tweak is set to Top Left, Top Center, or Top Right, the meta and post title may overlap with the header elements. To resolve this, try these solutions:
- Blog Page style - In the Blog: List section, choose any Style tweak except Full Bleed.
- Blog post style - In the Blog: Item section, choose any Header tweak except Full Bleed.
- Text layout - In the Blog: Design section, choose any of Alignment: Medium or Alignment: Bottom tweaks.
- Header layout - In the Header: Layout section, move the header elements. For example, if your post title and metadata always display in the top left, move your header elements to the center and right.
A bar flashes at the top of my screen when pages load
Ajax is a page-loading method that makes your site faster. Depending on your settings, the Ajax loading bar appears at the top of the page while pages load.
To hide the bar, from the Home Menu:
- Click Design
- Click Style Editor
- Scroll down to Site: Loading
- Uncheck Show Loading Bar
Alternatively, use the Width and Color tweaks in that same section to adjust the bar’s style.