Disable Shy Header in Sharepoint Online Hub Site

Copper Contributor

Using a search engine on the world-spanning computer network "The Internet", it seems this questions has popped up now and then without ever getting an answer from Microsoft. Is it so? It really is killing UX that the top navigation disappears when scrolling. If I could wish, a simple toggle for this would be great! Thanks!

4 Replies
I was able to accomplish that by referencing an external CSS file using an SPFx extension and adding some CSS.
In the CSS file add:
display: flex !important;

At least that is the solution if you're using hub navigation, I've seen others out there for regular modern navigation.
Really helpful thanks for sharing!



To follow up on this, I did some proper testing this morning.  Using my previous solution I had some issues with the mega menus acting weird from forcing all of the div's with "root-*" in it to display.


I noticed that when you scroll down it replaces the div class with a different which has a display: none attribute associated with it.  When you scroll back up it replaces the class name back to the original and shows the div again.


I found a solution that is working better this morning.  Use an SPFx extension to reference an external CSS and JS file.


In your JS file add document ready function, or a windows onload function and add this code:

var navDiv = $("#spTopPlaceholder").next();
$(navDiv).attr('id', 'showNav');
That will add an id to the div, which does not change when the class name is replaced.
In your CCS file add the following
    display: flex !important;   
This will ONLY target the div that has the hub nav in it.
There's a feedback post for this. We're avoiding customizing (CSS, JS, et al) due to its propensity to break over time with SaaS updates to SharePoint Online. I'm hoping Microsoft will turn the shy header into a settings option eventually.