Ultimate HubSpot CMS Hub Theme

Realize Theme Header

realize illustrations and icons_1

Header Settings

Header customization

The first thing visitors see on your website is a header. The website header has 3 functions:

  • It informs about a resource;
  • Sets the tone for the design of other pages;
  • Helps in website navigation.

That’s why it’s important to thoroughly customize your website header.

You can set up a user-friendly header of your website in Global Content Editor.

Logo

In the Logo tab you can set up an important item of your website header – logo.
Here you can upload a logo image, specify its size (width, height), and add a link. It is also possible to use a standard logo from branding.

Navigation items

For easier navigation and better experience, add the necessary navigation items. 

For each navigation item, you can:

  • add a name;
  • select the type of the element: link, scroll to the element, or dropdown;
  • add a link.

CTA

To engage with users, add a CTA to your website header. Add a CTA, go to the settings and fill in all required fields: 

  • name;
  • button design: main, outline, or link;
  • button type: link, scroll to the element, or pop-up;
  • add a link.

Styles settings

Go to the Styles tab to customize the header styles. Here, you can choose:

  • header navigation position: second row, inline left, center, or right;
  • background color: Light, Dark, Secondary 1, or Secondary 2 (set in the theme general settings). Transparent – a color of the section with the header module.
  • Accent color: Primary 1 or Primary 2 (set in the theme general settings).
  • Sticky position effect: a header ‘sticks’ to the screen when a user scrolls the page.

Get Support

Didn't find an answer? Please contact us if you have issues or new requests

Submit a Ticket/Request