Owners and Editors can select and customize the Classic Theme.
Once the Classic Theme is installed, you can start customizing your header to align with your brand’s identity.
The header is a key element of your brand portal, serving as the first touchpoint for users. It sets the tone for navigation, reinforces brand identity, and ensures a seamless user experience across your guidelines.
The Classic Theme offers a lot of customization possibilities. Let’s look at it.
Table of content
Customize link styles (default, hover, active)
There are several ways to personalize your header to match your brand’s style. To get started, navigate to Classic Theme, select the layout and navigation section, and then go straight to Header.
Within this section, you can customize the Type Style of your header navigation, including settings for Default, Hover, and Active states:
Default: Choose the color of your header menu elements when they are not interacted with.
Hover: Set the color that appears when users hover over a menu item.
Active: Define the color of the menu item when it corresponds to the currently active page.
You can apply your brand colors or select custom ones to achieve the perfect look.
Additionally, you have control over several text styling options, such as:
Displaying menu items in uppercase, italic, underlined, or highlighted formats.
Customizing font style and size.
Adjusting letter spacing and line height for better readability and design consistency.
These settings allow you to create a clear, visually cohesive, and branded navigation experience for your portal users.
Create custom dropdowns with tailored typography
To further personalize your portal, you may want to customize the look and feel of your dropdown menus. To do this, navigate to Classic Theme, go to the Layout and Navigation section, and then click on Header.
Customizing dropdown appearance
In the Custom Dropdowns section, you can adjust the visual style and structure of your dropdown menus, including:
Corner Radius: Set how rounded the dropdown corners should be by defining the pixel value.
Padding: Adjust the spacing inside the dropdown for a cleaner layout.
Shadow: Customize the shadow effect to add depth and enhance visibility.
Customizing Dropdown Typography
Just like the header navigation, you can define typography styles for your dropdown menus under Type Style – Dropdown Navigation:
Default: Set the text appearance when the dropdown is idle.
Hover: Choose how the text looks when a user hovers over a dropdown item.
Active: Define the style for the currently selected menu item.
These settings allow you to create a well-structured, visually cohesive dropdown menu that enhances both navigation and user experience.
Boost search visibility or hide it entirely
You can customize the look and functionality of your search bar to match your portal’s style. To do this, navigate to Classic Theme, go to the Layout and Navigation section, and click on Search.
Here, you can:
Hide the search bar entirely with a single click.
Customize the search icon and its trigger style.
Customize the Type Style by selecting the Default, Hover, and Active text color and font weight.
Get your language switcher on-brand
In the Layout and Navigation section of the Classic Theme, you can customize your language switcher to align with your brand’s style.
Under the Language Selection section, you can choose from different variations and adjust the Type Style settings. This allows you to customize the colors and font weight for both the default and hover states of the language switcher, ensuring a seamless and branded user experience.
You can also customize your language switcher's dropdown menu. To do this, go to the Custom Dropdown section and click on Type Style settings. Here, you can adjust the fonts, as well as the Default, Hover, and Active colors and font weight to match your brand’s style.
Align and fit background images
With the Classic Theme, you can easily customize your portal’s background image. To do this, navigate to the Theme icon, go to the Layout and Navigation section, and click on Header.
Under the Background settings, you can choose a background color or upload an image from your computer or Frontify libraries.
If you want to upload an image, you can then select how the image fits within the background:
None. Keeps the image at its original size.
Cover. Scales the image proportionally to fill the frame.
Contain. Adjusts the width or height to fit while maintaining proportions.
Also, you can align the image to the center, top, bottom, left, or right for precise positioning.
These options ensure your background seamlessly integrates with your portal’s design.
Add unlimited hero header text
Lastly, you can customize your hero text, the text that appears at the top of a page, in this case, as part of the header. To do this, navigate to the Theme icon, go to the Layout and Navigation section, and click on Header.
Toggle on the Hero Text button so you are able to modify the hero directly on the page as the video above shows.
And that’s it! Thanks for reading this help article. We hope you find it useful. Please take a look at the Getting Started help article to get more information on the Classic Theme.