Issue 6041 - Navbar search field moves after navbar logo is downloaded

includes/layout/header.tmpl

 {% if product_id %}
   {% set product = products[product_id] %}
   {% set search_label = "Search " + product.full_name + " Help" %}
   {% set search_site = config.get("general", "siteurl") + "," + product.url %}
 {% else %}
   {% set search_label = "Search for help..." %}
   {% set search_site = config.get("general", "siteurl") %}
 {% endif %}
 
 <header id="site-header" class="navbar {{ 'site-header-minimal' if product_id is not defined }}">
   <div class="container large-desktop-width">
     <h1 id="site-title">
       {{ "index" | linkify() }}
-        <img src="/img/png/eyeo-help.png" srcset="/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}">
+        <img src="/img/png/eyeo-help.png" srcset="/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}" height="30" width="205">

[juliandoucette, 2017/11/28 14:55:16]

NIT: I think that you could use em inside of your CSS file instead. But it seems
you measured your navbar/header heights in px inside SCSS - so perhaps this
belongs to a low priority list of things you can refactor?

[ire, 2017/11/28 16:13:49]

Wasn't the point to put these values in HTML? AFAIK that is the only way to make
sure the browser reserves the amount of space needed, i.e. not if it's defined
in CSS

       </a>
     </h1>
 
     <button class="toggle-navbar-collapse unstyled phablet-and-mobile-only">
       <img src="/img/png/search-icon.png" srcset="/img/svg/search-icon.svg 2x" alt="{{ "Toggle Search Bar" | translate("search-toggle-alt", "Image alt text") }}">
     </button>
 
     <div class="navbar-collapse">
       <form id="search-form" action="https://duckduckgo.com" method="GET">
         <label for="search" class="sr-only">{{ search_label | translate("search-form-label", "Input label") }}</label>
         <input id="search" name="q" type="search" placeholder="{{ search_label | translate("search-form-label", "Input label") }}">
         <input type="hidden" name="sites" value="{{ search_site }}">
         <button type="submit">
           <img src="/img/png/search-icon.png" srcset="/img/svg/search-icon.svg 2x" alt="{{ "Search" | translate("search-icon-alt", "Image alt text") }}">
         </button>
       </form>
 
       {% if product_id %}
       <nav id="product-website-link">
         <a href="{{ product.url }}">
           {{ product.full_name | translate(product_id+"-product-link", "Link label") }}<img src="/img/png/external-icon.png" srcset="/img/svg/external-icon.svg 2x" alt="{{ "External link icon" | translate("external-link-icon", "Image alt text") }}">
         </a>
       </nav>
       {% endif %}
     </div>
   </div>
 </header>