I have customized the global nav menu in SP 2013 using css in the master page and I have it wrapping when it exceeds the page width. Everything is working fine except now the nav menu is overlapping the page contents when the browser is reduced or if there are many items in it:

enter image description here

Not sure how to force the page contents down when the menu wraps. Any help is appreciated.

Btw, all I did was apply css to the default SharePoint:AspMenu control in the master page and set the attribute ItemWrap="true"

  • Have you looked at the DOM explorer to see what's causing the fixed height? – Roman May 8 '15 at 17:59
  • I looked at the DOM but didn't see anything significant. When I add #DeltaPlaceHolderMain { clear: both; } to the css, the page content moves down, but it moves down below the left nav bar content. Gonna look a little closer now that I see that – steveareeno May 8 '15 at 18:16
  • 1
    what's happening is that the content for the global nav is probably floated which takes it out of the normal DOM flow, which means you'll need to take the wrapping div and ensure that it's using clear:both (actually there is a better way to clear divs these days using best practice). could you post your html structure snippet (maybe remove the inner html of the global nav itself for breivity) – Roman May 8 '15 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.