I have a Communication site that is set as hubSite and there are some team sites created and linked with the hub site.

So i am seeing two types of navigation. One is the HubSite navigation and other is the navigation for communication site showing Home, documents, pages, site contents and Edit. See screenshot below.

enter image description here

I am using modern script editor web part to inject css, I have tried below:

a[href="/sites/**/Shared Documents/Forms/AllItems.aspx"]{ display:none; }
a[href="/sites/**"]{ display:none; }
a[href="/sites/**/SitePages/Forms/ByAuthor.aspx"]{ display:none; }
a[href="/sites/***/_layouts/15/viewlsts.aspx"]{ display:none; }

Above css helps me hide Home, Documents, Pages, Site contents link and edit as well, once I reload the page, Edit comes back, upon checking from developer tools, ID for edit link keeps on changing so unable to hide that.

Can someone please help me with appropriate css class to hide the Edit button. Again from the hub navigation on the very top, I do not want to hide Edit button. Just from the second nav, thanks in advance.

1 Answer 1


If you only want to hide the navigation for communication site and show the hub site navigation. The can use the CSS style below to achieve it.

div[class^='titleAndNavWrapper'] .ms-HorizontalNav{
    display:none !important;
  • Thank you so much, that works.
    – mdevm
    Jun 13, 2019 at 13:17
  • I am using the snippet above and it works well on one of my client's tenant. i tried the same snippet in one of other client's portal but does not seem to do anything. Any ideas?
    – mdevm
    Aug 8, 2019 at 16:54
  • This is customisation is not supported by Microsoft: docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/… May 19, 2022 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.