Let’s go over how to customize your website’s header. (3 of 5)
(2 of 5) ⇐ PrevNext ⇒ (4 of 5)
The global header in Atlas consists of a drag-and-drop section that includes a Navbar module as default content. This means that you also can add other modules to your header section, or completely get rid of the Navbar module.
To preview and edit the global header, we need to create a page if we haven’t yet. Check out this HubSpot article on how to create pages.
To access the website header content editor:
- Go to any website page that has the website header.
- Hover over the header and click on it.
- Note that any change to the global header will affect all website pages. Click Open in global content editor.
- You are now editing the global header content.
Drag-and-drop Feature Overview
The header section can be edited just like any other drag-and-drop area. You can simply click on the Add icon, and chose a module to add to your section. Below is an example on how to add and style a simple label on the top of your header.
Navbar Module Overview
Let’s go over the available fields for the Navbar module.
Content Fields
Logo
This group of settings allows you to add and customize your brand’s logo.
| Logo Type |  |
You can chose between an Inline SVG or an Image File. The former allows you to input an SVG code, which improves performance and definition. The latter allows you to choose an image file. |
| Logo SVG Code |  |
SVG code field. To extract the code from a .SVG file, simply open the file with a text editor, and copy-paste the code in this box. |
| Override SVG Fill Color |  |
Allows you to override the Fill property on your SVG code to change it’s color. |
| Inherit From Nav Color |  |
When enabled, the SVG fill will match the Navbar’s text color. |
| SVG Fill Color |  |
Selector for your SVG logo’s color. |
| Logo File |  |
We recommend using an image that either doesn’t have a background, or that has a static background color that you can match with the Background Color setting. |
| Link |  |
Set a link for your logo. You can link to an External URL, a Content on you account, or to a Blog. |
Navigation
Main navigation.
| Main Navigation Style |  |
Allows you to choose between Simple Navigation and Advanced Navigation. The former uses a simple parent/child layout, while the latter uses a mega menu structure. |
| Menu Type |  |
Allows you to toggle between a new menu that you can create on the spot and a previously created HubSpot menu. |
| Menu Items |  |
Parent items for the advanced navigation. |
| Menu Item Label |  |
Text label for a parent item. |
| Menu Item Type |  |
Allows you to choose between a Link type and a Mega Menu type of item. The former simply links to a different content, while the latter allows for a more complex customization. |
Menu Item Type: Link
| Menu Item Link |  |
This type of menu item links to content. |
Menu Item Type: Mega Menu
| Mega Menu Columns (Repeatable) |  |
You can add multiple columns to the Mega Menu view that shows up when hovering over a parent navigation item whose type is set to Mega Menu. |
| Mega Menu Items (Repeatable) |  |
Each Mega Menu column allows for multiple Mega Menu Items. |
| Mega Menu Item Type |  |
An item can be of type Link, Image, Button or Rich Text. |
Call to Action Buttons
| Buttons (Repeatable) |  |
You can set up up to three call-to-action buttons with overridable styling options. |
Auxiliary Navigation
Secondary navigation bar at the top of your navbar.
| Enable |  |
Enables the auxiliary navigation. |
| Left Side (Repeatable) |  |
Allows you to add navigation items on the left side of the auxiliary navigation. |
| Right Side (Repeatable) |  |
Allows you to add navigation items on the right side of the auxiliary navigation. |
| Menu Item Label | |
Text label for an auxiliary navigation item. |
| Menu Item Link |  |
Link for an auxiliary navigation item. |
Search
| Show Search Button |  |
Enables the navbar’s search bar. |
| Button Location |  |
Allows you to choose the search icon’s position. It can be set in the Main Navbar, or in multiple Auxiliary Navigation positions. The Auxiliary Navigation needs to be enabled for the latter settings to work. |
Language Switcher
| Show Language Switcher |  |
Enables the navbar’s language switcher bar. This feature allows the user to switch between the page or content’s different language variations. |
| Button Location |  |
Allows you to choose the language switcher icon’s position. It can be set in the Main Navbar, or in multiple Auxiliary Navigation positions. The Auxiliary Navigation needs to be enabled for the latter settings to work. |
Style Fields
Theme Overrides
Theme settings overrides.
| Border Radius |  |
Overrides the border radius settings for buttons and cards. |
| Shadows |  |
Overrides the shadow settings for buttons and cards. |
Navbar Style & Behavior
| Sticky Nav |  |
Fixes the navbar to the top of the screen at all times. |
| Floating Nav |  |
Slightly reduces the navbar’s dimensions to create a floating effect. |
Menu Alignment
| Link Color |  |
Navigation link color override. |
| Link Hover Color |  |
Navigation link hover color override. |
(2 of 5) ⇐ PrevNext ⇒ (4 of 5)
