Your sidebar is a key element of your portal’s navigation. A well-designed, on-brand, and intuitive sidebar not only enhances the user experience but also increases engagement.
With the Classic Theme, you have full control over its appearance and functionality. Let’s explore the customization options available to make your sidebar aesthetic and effective.
Table of content
Style links with highlights, backgrounds, and borders
To start customizing your sidebar, navigate to the Layout and Navigation section and select the Sidebar tab from the dropdown menu. Here, you’ll find a range of options, including visibility, padding, width, and more.
Click on Type Styles and select the element you want to modify: category, page, or section, and explore customization options such as:
Default, hover, and active colors and fonts
Text formatting: uppercase, lowercase, or underline
In the same window, you can also adjust the menu element border, choosing its style, color, and line weight.
Customize accordion icons and dividers
You can further personalize your portal’s menu by selecting accordion icons and dividers. To do this, navigate to the Layout and navigation section and select the Sidebar tab from the dropdown menu.
In the Category and accordion icons tab, choose icons for open and closed states.
Toggle on Category underline to customize the menu dividers, adjusting the style (solid, dotted, or dashed), color, and thickness for a more refined look.
Add background color
To change your menu background color, go to the Layout and navigation section and select the Sidebar tab from the dropdown menu.
Under Background Color, you can choose from your brand colors or create a custom color to set a unique background for your menu items.
Adjust the sidebar width to the pixel
You can set up your sidebar width to balance navigation visibility and page content space. Make it smaller for a more content-focused layout or larger to emphasize navigation.
To adjust the width, navigate to the Layout and Navigation section and select the Sidebar tab.
Under Width, choose from preset spacing options or toggle on Custom to define the exact pixel size.
Thanks for reading this help article. For more information on the Classic Theme, check the Getting Started help article.