When a site has a "system message" shown (such as the message shown on recently launched beta sites, like Vi/Vim), the mobile layout suffers:


Compare the above with how the mobile navigation bar normally looks:


Worse yet, a selected tab on the navigation bar is shown in white on white:


Observed in mobile Opera 27 on Android, and also in desktop Chrome 41 on Chrome OS, from where the screenshots are taken.

The problem is that <div class="system-message-container"> is positioned where the navigation bar is supposed to be; if it is deleted, the normality is restored.

  • Yes, reproduced.
    – nicael
    Mar 1, 2015 at 7:09
  • 1
    +1 for this as I posted the same (dupe accepted min ago) today. It's been over 5 months... Aug 2, 2015 at 1:37
  • The. Bug. Is. Finally. Fixed. (because of the 10M banner on SO)
    – user259867
    Sep 13, 2015 at 0:32

1 Answer 1


Here's a simple CSS fix:

.nav { clear: both }

P.S. You can currently reproduce this bug on Stack Overflow by switching to the mobile view, thanks to the "ten million questions" announcement. Here's a pair of screenshots showing the SO front page with and without this fix (taken using the Firefox dev tools, in responsive design mode):

Screenshot of Stack Overflow mobile view with CSS bug     Screenshot of fixed Stack Overflow mobile view


You must log in to answer this question.