How to Hide Elements on Your SharePoint Page

With the help of the ShortPoint Code Editor web part, you can hide any element on your page. For example, we’ve hidden the highlighted navigation menu below using Custom CSS:

After pasting the Custom CSS in the SShortPoint Code Editor web part, this will be the result:

This article will demonstrate how to hide any element on your page using the ShortPoint Code Editor web part. Follow the quick walkthrough or the detailed steps to get started.

Quick Walkthrough

1. Inspect the element you want to hide and identify the parent and child selectors.

2. Copy the code below and replace the parent and child selectors with the one you found:

[class*="parentselector"] [class*="childselector"] { display: none !important; }

3. Insert the ShortPoint Code web part.

4. Edit the web part and delete default codes.

5. Paste the code you worked on in step 2 in the Edit CSS field.

6. Close the ShortPoint Code window.

7. Make sure that Sandbox Mode and Contain CSS Styles are disabled.

8. Publish the page.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Get the Parent and Child Selector
    • Step 1: Copy the Code
    • Step 2: Inspect Element
    • Step 3: Find the Parent Selector
    • Step 4: Find the Child Selector
  • Part 2: Hide Elements
    • Step 1: Insert the ShortPoint Code Editor
    • Step 2: Edit the ShortPoint Code
    • Step 3: Delete Default Codes
    • Step 4: Paste the code
    • Step 5: Publish

Prerequisites

• You must have the ShortPoint Code Editor installed in your SharePoint environment. To learn how, go to How to Install the ShortPoint Code Editor in SharePoint.

Step-by-step Tutorial

The steps are divided into two parts. Follow each part carefully to successfully hide elements on your page: 

Part 1: Get the Parent and Child Selector

This part will teach you how to get the parent and child selector.

Step 1: Copy the Code

• Copy the code below and paste it into a notepad:

[class*="parentselector"] [class*="childselector"] { display: none !important; }

• Right-click on the element and select Inspect: 

• The dev tools window for your page will open:

Step 3: Find the Parent Selector

• As you hover over different lines of code in the dev tools window, you'll notice certain areas of your SharePoint page highlighted in blue. This simply means that the highlighted area corresponds to the line of code you are hovering over in the dev tools window. 

• You need to go through the line of codes until you reach the whole area where the elements you want to hide are contained. For example, since we want to hide the navigation menu, we need to look for the line of code that covers the whole area of the navigation menu, including the logo and the title of the page. This will be our parent selector:

• Once you find it in the dev tools window, you need to copy the line of code that comes after class=”

• Then, go back to the code you copied in Step 1 and replace parentselector. Your code will now look like this:

[class*="root-103"] [class*="childselector"] { display: none !important; }

• To ensure that the code works properly, remove the number that comes after “-”. Your code will now look like this:

[class*="root-"] [class*="childselector"] { display: none !important; }

• Once you find it in the dev tools window, you need to copy the line of code that comes after class=”

• Then, go back to the code you are working on and replace childselector. Your code will now look like this:

[class*="root-"] [class*="bottomNavRow-107"] { display: none !important; }

• To ensure that the code works properly, remove the number that comes after “-”. Your code will now look like this:

[class*="root-"] [class*="bottomNavRow-"] { display: none !important; }

Part 2: Hide Elements

This part will show you how to hide the elements:

Step 1: Insert the ShortPoint Code Editor

• Edit your SharePoint page:

• Close the Toolbox:

• Click the plus icon to add web parts:

• Use the search bar to look for ShortPoint Code or scroll down until you see the Advanced section. Click ShortPoint Code:

Step 2: Edit the ShortPoint Code

• Click the Edit properties icon:

Step 3: Delete Default Codes

• Go through each field, delete the default codes, and save:

Step 4: Paste the code

• Click the Edit CSS field:

• Paste the code you prepared in Part 1 and Save:

• To ensure that the code works properly, scroll down and make sure that Sandbox Mode and Contain CSS Styles are disabled:

Step 5: Publish

• Close the ShortPoint Code window:

• Publish your page:

Congratulations! You have successfully hidden the selected elements on your page:

Related articles:

• How to Add an X Post to a SharePoint Page
• How to Add an Instagram Post to a SharePoint Page
• How to Add a LinkedIn Post to a SharePoint Page
• How to Add a Viva Engage Feed to a SharePoint Page
• How to Embed a YouTube Video Playlist to a SharePoint Page
• How to Embed a Vimeo Video Playlist to a SharePoint Page
• How to Add a Stock Widget to a SharePoint Site
• How to Add Canva Designs to SharePoint
• How to Add an Online Digital Clock to a SharePoint Site