Issue 5634 - Replaced logo and refactored navbar width and colors

templates/default.tmpl

Index: templates/default.tmpl
===================================================================
--- a/templates/default.tmpl
+++ b/templates/default.tmpl
@@ -80,47 +80,52 @@
     {% macro pageitem(name) %}
       {% if name == page %}
         <li class="selected">{{get_string(name, "menu")}}</li>
       {% else %}
         <li>{{name|linkify}}{{get_string(name, "menu")}}</a></li>
       {% endif %}
     {% endmacro %}
 
-    <header>
-      {{"index"|linkify(id="logo", class="sprite", itemprop="image")}}</a>
-      <nav>
-        <ul>
-          {% if localefile == "index" %}
-            <li class="selected first">{{get_string("installation", "menu")}}</li>
-          {% else %}
-            <li class="install-link first">{{"index"|linkify}}{{get_string("installation", "menu")}} <span class="sprite install-link-icon"></span></a></li>
-          {% endif %}
-          {% for name in ["about", "features", "bugs", "contribute"] %}
-            {{pageitem(name)}}
+    <nav id="navbar">
+      <div class="navbar-container">
+        {{ "index" | linkify(id="navbar-logo") }}
+          <img
+            src="/img/navbar-logo.png"
+            srcset="/img/navbar-logo.svg 2x">
+          <span>{{ "Adblock <strong>Plus</strong>" | translate("navbar-logo-text", "Navbar logo text") }}</span>
+        </a>
+        <a href="#" id="navbar-menu-toggle">
+          <img
+            src="/img/menu-toggle.png"
+            srcset="/img/menu-toggle.svg 2x">
+        </a>
+        <ul id="navbar-menu">
+          {% for pagename in ["about", "features", "bugs", "contribute"] %}
+            <li>
+              {{ pagename | linkify }}{{ get_string(pagename, "menu") }}</a>
+            </li>
           {% endfor %}
-          <li id="language">
-            <div id="current-language">
+          <li id="navbar-locale-menubar">
+            <a href="#" id="navbar-locale-selected">
               {{ config.get("langnames", locale) }} ({{ locale | to_og_locale | to_og_location }})
-              <span id="language-arrow" class="sprite"></span>
-            </div>
-            <ul id="language-selector">
+            </a>
+            <ul id="navbar-locale-menu">
               {% for available_locale in available_locales %}
-                <li class="language-entry">
+                <li>
                   {{ page | linkify(available_locale) }}
                     {{ config.get("langnames", available_locale) }} ({{ available_locale | to_og_locale | to_og_location }})
                   </a>
                 </li>
               {% endfor %}
-            </ul>
+            </ul>{# #navbar-locale-menu #}
           </li>
-        </ul>
-        <a href="#" id="hamburger"></a>
-      </nav>
-    </header>
+        </ul>{# #navbar-menu #}
+      </div>{# .container #}
+    </nav>{# #navbar #}
 
     <div id="content" class="container content {{ localefile == "index" and page }}">
       {% if abbnotification %}
       <? include abb-notification ?>
       {% endif %}
       {% if not noheading %}
       <h1>{{title|translate("title")}}</h1>
       {% endif %}