Forum Discussion
Site header: overflows to navigation bar
We use SharePoint for our intranet, and with a rebrand coming, we're building new headers for each of the sites that make up the intranet.
Since we first built our sites, the site header behaviour seems to have changed: it overflows vertically into the navigation bar, rather than constraining it to the height of the actual header (above the nav).
Not ideal, but I'd adjusted where the business logo sits in the height to work well.
However, when you scroll down and the header compresses, this chops the top half of the logo off.
Anyone have any similar experience/solutions? I don't want to deploy a CSS code, as that's likely to break later. Alternatively, if the lovely people at Microsoft could put it back to constrain it within the banner height, that'd be great. It's easier to create a super wide image (to avoid gaps) than it is to juggle the variables when height overflows differently on different screens.
Thanks in advance!
2 Replies
Thanks for your response.
While I like the "shy header", the design should still prevent any headers from overflowing into the navigation bar below it, constraining the image to the header section itself. That would make it much more efficient to plan image designs.
SharePoint now uses a “shy header,” which means the header shrinks when you scroll. Because the header becomes shorter, any tall logo gets cropped. That’s why the top part of your logo is getting cut off.
This is normal behavior in modern SharePoint and cannot be turned off.
To avoid the cropping:
- Use a shorter logo: keep it within 64px height, which is Microsoft’s recommended size.
Customize your SharePoint site - Microsoft Support - Use a wide, short banner instead of a tall one.
- Choose the Standard or Compact header layout
I found a link where someone suggests using custom CSS to stop the header from shrinking, but I wouldn’t recommend any customization in UI:
- Use a shorter logo: keep it within 64px height, which is Microsoft’s recommended size.
