Hide text in modern page using CSS - SharePoint Online

Question

I have a modern SPO page and i want to hide the text "Add Link" using CSS. I found the class and used the below styles in Modern Script editor webpart to hide the text but it is not working:

Style 1:

<style type="text/css">  
.ms-HorizontalNavItem {  
display: none !important;  
}  
</style>  

Style 2:

<style type="text/css">  
  button.ms-HorizontalNavItem-link {  
  display: none !important;  
  }  
</style>  

Both style didn't work.Can someone tell me what i am doing wrong or how to achieve this?

Answer 1

Manipulating the DOM in SharePoint Online is not supported as the DOM frequently changes and any such solution would break. Instead, you should remove the user's permission which grants them the ability to add a link. By removing the permission, the add link should also disappear.

Answer 2

Hi @George Thomas T P ,

When the page is in edit mode, the style or elements may be different from when it's published. It seems that the style has not been embedded. Could you please generate the CSS selector through other attributes? Such as id tabindex?

After saving the CSS code, please full refresh the page to load the CSS.

Best Regards,
Baker Kong

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.