open Mon-Fri from 9-5

Shopping cart Get started

Header

The header settings live in data/<lang>/header.yaml.

Logo image

This sets the image in the header. Omitting a value here results in a ’text logo’ as you can see on this website. The text logo consists of the title field from general.yaml and the logo_subtitle field from this file.

Logo subtitle

When you omit the value for logo_image the text logo appears, and this is its second line.

Mobile view at

mobile_view_width determines at which width the site switches to the mobile menu. It reaches CSS through a data-mobile-width attribute on the <body> and a few lines of site.js, because a media query cannot read a data file.

This is an array that holds the main menu. The items consist of a title and a link, and may hold a nested items array for a submenu. Breadcrumbs are based on this menu structure.

Call To Action (CTA)

The header CTA is the button in the top right corner of each page. You can turn it on or off with the active variable; title and link define the text and the target.

cta:
  active: true
  title: Get started
  link: /get-started/

Preheader

The preheader is the utility bar at the top of the page. Whether it shows at all, and in which style, is a global setting; the line it shows is language-specific and lives here:

preheader: open Mon-Fri from 9-5

Get started with Hugobricks today!

Experience the future of web development with Hugo and stackable content bricks. Build lightning-fast static sites with ease and flexibility.

Get started now