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

  • 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

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: