SharePoint Online site header appears transparent instead of showing banner

I am having a similar issue with the background showing in the navigation and it doesn't collapse correctly. I found that the sites that are displaying correctly, do not have an overlay option checked, but once it is checked, you cannot undo it. Help!

Hi @Brandon Alexis Castro Arce, 

I hope the information I shared earlier was at least somewhat helpful in addressing your issue. If the previous methods haven’t been effective, please feel free to let me know. I’d be happy to explore the issue more deeply with you so we can work together toward a better solution. 

If you found the answer helpful, we kindly invite you to mark it as the accepted answer. Once marked, it will automatically be pinned to the top. Since many other users also search for information in this community, your valuable contribution will help them easily find the right channel and useful insights more quickly. 

Thank you very much, and I wish you a great day.

Hi @Brandon Alexis Castro Arce, 

Thank you for reaching out to the Microsoft Q&A forum and sharing the details of your experience with the SharePoint Online site header. I understand how important it is for your site to display clearly, especially when the navigation bar blends into the background unexpectedly. 

Based on your description and the screenshot you provided, it looks like the header is showing with transparency, which can make the site harder to navigate and visually inconsistent. I’d like to walk you through a few steps that can help adjust the header appearance to match your expectations. 

1/ Try to check the Header Layout 

• Go to your SharePoint site. 
• Click the gear icon in the top-right corner. 

• Select Change the Look > Header. 

• Choose the Extended layout.  
  • This layout supports background images and solid color overlays. 
  • Other layouts like Minimal or Compact may not show background images. 

2/ You can add a Background Image or Color 

• In the same Header settings:  
• Upload a background image or select a background color. 
• Make sure the image has enough contrast with the navigation text. 
• You can also adjust the overlay color to improve visibility. 

3/ You can try to apply a Theme 

• Go to Change the Look > Theme. 
• Select a theme or image. 
• Then you can change the overlay color or opacity to remove the transparent.  
• After that you can save and apply it. 
• This refreshes the site’s styling and ensures the header settings are active. 

4/ Then try to clear Browser Cache 

• Sometimes changes don’t appear right away. 
• Clear your browser cache or open the site in a different browser to check the updated view. 

5/ You can try the feature availability 

• Microsoft has recently introduced new header customization options. 
• If your organization hasn’t received these updates yet, some features may not be available. 
• You can check with your SharePoint administrator or Microsoft 365 admin center for rollout status. 

Note: Please understand that our initial response does not always resolve the issue immediately. However, with your help and more detailed information, we can work together to find a solution.   I hope the information provided proves useful. Please proceed with the outlined steps and let me know whether they resolve the issue. If not, I’ll be glad to continue working with you to find a solution.   

Thank you for your patience and understanding throughout this process. Should you have any questions or need further assistance, feel free to reach out at any time.  

I look forward to hearing from you.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment”.     

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.