How to hide the navigation appearing on Communication site

Question

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.

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; }
#HorizontalNav7EditLink{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.

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.

<style>
div[class^='titleAndNavWrapper'] .ms-HorizontalNav{
    display:none !important;
}
</style>