Forum Discussion
Disable Shy Header in Sharepoint Online Hub Site
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 k...
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
#showNav{
display: flex !important;
}
This will ONLY target the div that has the hub nav in it.