templates/page: fix language switcher on mobile

basewiki/bootstrap.local.css

@@ -440,9 +440,9 @@ header h1::before {
 
 /* Language switchers */
 
-#language-switcher-top {
-  position: relative;
-  margin-top: 7px;
+.language-switcher-top {
+  display: block;
+  padding-top: 9px;
   width: 120px; /* Force size to prevent overflowing breadcrumbs */
   height: 35px;
   z-index: 5;
@@ -507,7 +507,6 @@ header h1::before {
 
 .current-language {
   border: 1px solid transparent;
-  background: url(wikiicons/languages.png) no-repeat 92px 9px;
 }
 
 .other-languages li {

templates/page.tmpl

@@ -81,36 +81,42 @@
             <img alt="<TMPL_VAR WIKINAME>" src="/favicon.png" width="48" height="48" />
           </a>
         </div>
+
         <div id="navbar" class="collapse navbar-collapse">
-            <TMPL_IF SIDEBAR>
-            <TMPL_VAR SIDEBAR>
-            </TMPL_IF>
-          <ul class="nav navbar-nav">
-            <TMPL_LOOP BOOTMENU>
-                <TMPL_IF FIRSTNAV>
-                    <li <TMPL_IF ACTIVE>class="active"</TMPL_IF>><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a></li>
-                </TMPL_IF>
-            </TMPL_LOOP>
-          <div id="language-switcher-top">
+
           <TMPL_IF OTHERLANGUAGES>
-          <nav class="language-switcher">
-            <div class="current-language"><TMPL_VAR LANG_NAME></div>
-            <ul class="other-languages">
+		  <div class="dropdown language-switcher-top navbar-left">
+		   <button class="btn btn-default dropdown-toggle" type="button" id="language-menu-top" data-toggle=
+"dropdown" aria-haspopup="true" aria-expanded="true">
+            <TMPL_VAR LANG_NAME>
+			<img src="/wikiicons/languages.png">
+			</button>
+			<ul class="dropdown-menu" aria-labelledby="language-menu-top">
               <TMPL_LOOP OTHERLANGUAGES>
               <li>
-                <a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a>
-              </li>
+			  <a href="<TMPL_VAR URL>"><TMPL_VAR LANGUAGE></a>
+			  </li>
               </TMPL_LOOP>
               <TMPL_IF HAVE_ACTIONS>
-                <li class="improve-translations">
+				<li class="improve-translations">
                 <a href="<TMPL_VAR BASEURL>contribute/how/translate/" rel="nofollow">Improve translations</a>
                 </li>
               </TMPL_IF>
             </ul>
-          </nav>
           </TMPL_IF>
           </div>
 
+            <TMPL_IF SIDEBAR>
+            <TMPL_VAR SIDEBAR>
+            </TMPL_IF>
+          <ul class="nav navbar-nav">
+            <TMPL_LOOP BOOTMENU>
+                <TMPL_IF FIRSTNAV>
+                    <li <TMPL_IF ACTIVE>class="active"</TMPL_IF>><a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a></li>
+                </TMPL_IF>
+            </TMPL_LOOP>
+
+
 
           </ul>
         </div>