Menu placement on tablets

[matthewberryman]

This looks ugly for me on iPad and I presume Android tablets of certain resolutions as a result of the ODI showcase change forcing menu items down.

[matthewberryman]

The issue also occurs on small enough screen sizes on desktop, too. Not on really small screen sizes e.g. iPhone as then you get the burger menu.

You can apply the following patch:

--- a/banjir/assets/templates/index.hbs
+++ b/banjir/assets/templates/index.hbs
@@ -73,7 +73,7 @@
               <span class="icon-bar" style="background-color:#CCC;"></span>
             </button>
           </div>
-          <div class="collapse navbar-collapse navbar-ex1-collapse" style="margin-right:100px;">
+          <div class="collapse navbar-collapse navbar-ex1-collapse">
             <ul class="nav navbar-nav navbar-right">
               <li class="active"><a href="/{{site.url-prefix}}/{{site.locale-url-prefix}}/">{{{navbar.home}}}</a></li>
               <li><a href="/{{site.url-prefix}}/{{site.locale-url-prefix}}/map">{{{navbar.map}}}</a></li>

which works for some screen sizes on desktop, however then you get the following on iPad:

One option to consider is to create more space by removing the link to the alternate language, which I am in favour of as we have been supporting language detection for a while, or alternatively replacing "Bahasa Indonesian" and "English" with "BI" and "EN"?

Until then I think it's best to remove the showcase ribbon, which I will do shortly.

[tomasholderness]

Thanks for logging. This looks to be two issues:

1) addition of the "Software" menu item - causing the newline space to be added. 2) a safari specific issue where the menu isn't collapsing to hamburger at the required breakpoint, possibly due to issue 1 (In Firefox and Chrome the hamburger correctly appears before the ribbon is able to clash with "Bahasa Indonesian".

For a proper fix I need to tweak the hamburger breakpoints to account for the "Software" item and work out why this isn't being triggered in Safari.