How to show the SharePoint navigation tabs when in edit mode

A lot of times, the space allocated to header and logo is insufficient for a branded customized header. The regular out-of-the-box navigation tabs are not shown in edit mode, because the ribbon needs the space taken by both header and tabs in view mode.

To allocate more space for the header and logo image, many clients prefer to expand the header height by allocating the height used by the tabs, thus moving the tabs further below. When the users go into edit mode though, the Ribbon now only takes up once the height of the header and once the height of the tabs. It will move the page up when in edit mode. A solution is to always show the navigation regardless of mode.

In this case, view mode would show:

• new header(height of old header + height of tabs)
• tabs

Edit mode would show:

• ribbon (height of old header + height of tabs by default)
• tabs

What happens out-of-the-box: when in edit mode, the s4-titlerow  (which contains both Header area and Tabs) gets a "display:none;" and the Ribbon becomes visible.

Simply move the entire html structure from under s4-topheader2 from inside s4-titlerow right after s4-titlerow.