To present the site structure, it is very useful to take full advantage of the header menu. In this tutorial, we will show you how you can create a structured menu with drop-down lists (sub-menus), just like this one:
TABLE OF CONTENTS
- Before we begin
- Important
- Step 1. Setting up the Navigation
- Step 2. Term Store Management
- Step 3. Header Menu Customization in ShortPoint Theme Builder
Before we begin
- Header Menu Customization in ShortPoint Theme Builder is only supported for Classic SharePoint Experience.
- For customizing it in Modern Experience, use the custom CSS code (we will provide with an example for changing background color in the Step 3), or Change look SharePoint option under the Settings.
Important
- The following guidelines do not work for Modern Communication sites, since it is not possible to activate publishing features for this kind of sites.
Step 1. Setting up the Navigation
Prerequisite:
To complete this step, you need to have the Publishing Features activated on the Site and Site Collection Level.
Changing the Site Settings:
Please open Site Settings > Navigation and choose Managed Navigation under Global Navigation:
Scroll down a little and find the category Managed Navigation: Term Set.
Please click Create Term Set button. You will see that a new folder has appeared (highlighted by yellow on the screenshot below). After that, please click Term Store Management Tool. A new tab in your browser will be opened, but before managing the Term Store, please click OK on the Navigation page to save the changes.
Step 2. Term Store Management
After the Term Store Management Tool is opened, please search for the newly created folder in the list on the left:
Hover over it, and you will see an arrow. Click it and choose Create Term from the drop-down list:
Type in a name for the first term you would like to use in your navigation menu. Choose the Navigation tab on the top. Under Navigation Node Type, please choose Simple Link or Header. Copy the page address you would like this term to redirect the user to, and paste it into the Simple Link or Header field, as shown below:
In the same way, please create other terms. For creating drop-down lists (sub-menus), please, hover over the necessary term, press the arrow and create a sub-term, as shown below:
Don't forget to set up the links for every new term in the Navigation tab. After you are finished, press Save in the bottom of the page.
Step 3. Header Menu Customization in ShortPoint Theme Builder
Classic SharePoint site
To set up the background, hover and text colors of the sub menu, please open the Theme Builder (Site Contents () > ShortPoint Dashboard > Theme Builder > Customize my Site) and choose Menus > Backgrounds & Colors.
In this panel, you will be able to customize the look and feel of your menu and sub-menus. After everything is ready, press Publish to save your changes.
Note: To find out more about header and menu customization in Theme Builder, please check How to Design a Beautiful Header (Inspired by ShortPoint Demos Website).
Modern SharePoint site
As previously said, Header Menu Customization in ShortPoint Theme Builder are not supported for Modern SharePoint Experience. However, you can use the custom CSS code to customize it a bit.
Please open the Theme Builder (Site Contents > ShortPoint Dashboard > Theme Builder > Customize my Site).
Navigate to Utilities > Custom CSS.
Copy the following piece of code to customize the global navigation background color:
[class*='mainHeader'] .ms-HorizontalNav {
background: red !important;
}
Note: Change the background color in the code to your own preference.
For changing the header background color use the following custom CSS:
[class^="mainHeader-"] {
background-color: yellow;
}
Note: Change the header background color in the code to your own preference.
Paste the copied code to the Custom CSS field and click Apply.
Click Publish to save your customizations.
Thank you for your attention!
Related articles: