CSS fix: SharePoint global navigation hidden by iFrame (web part)




If you have a global navigation with more than a few second level items then the fly-out nature of the menu may cause some page content to be hidden while the menu is being interacted with by users. This is expected and acceptable behaviour.

I have found that sometimes (in IE only) the navigation fly-out falls behind page elements and cannot be used correctly. This is the case when iFrames are present in the content area. This issue came to my attention when using the Yammer Embed API to provide users with Yammer feeds from SharePoint.

The global navigation fly-out is being hidden by a Yammer Embedded feed (rendered as an iFrame)
The global navigation fly-out is being hidden by a Yammer Embedded feed (rendered as an iFrame)

The simplest way to resolve this is with CSS. The following CSS snippet should resolve this issue for you. We all know about z-index but the position:relative is also required for it to be applied correctly in IE.

N.B. The below snippet is specifically for Yammer Embed iFrames, if you would like to target all iFrames then the id selector should be removed (i.e. iframe#embed-feed becomes iframe).

/* Ensure that the global navigation 
is displayed in front of iFrames */
iframe#embed-feed {
    position:relative;
    z-index:1;
}

ul.dynamic {
    z-index:10;
}

Paul.




2 thoughts on “CSS fix: SharePoint global navigation hidden by iFrame (web part)”

  1. Hi, unfortunately, this doesn’t work for me. No amount of changes to the z-index affect the iframe being on top. I would appreciate any other suggestions you may have.

Leave a Reply

Your email address will not be published.