templates: fix header styling

Author: shn-liqd

adhocracy-plus/assets/images/logo-mobile.png

@@ -7,52 +7,51 @@
 .header-upper__brand {
     font-size: $font-size-lg;
     line-height: inherit;
+    display: flex;
+    align-items: center;
 }
 
 .header-upper__brand-img {
     display: block;
-    height: 3rem;
+    height: 2.5rem;
     width: auto;
 
     &--mobile {
         height: 2rem;
 
         @media (min-width: $breakpoint) {
-            display:none;
+            display: none;
         }
     }
 
-     &--desktop {
+    &--desktop {
         @media (max-width: $breakpoint) {
-            display:none;
+            display: none;
         }
     }
-
 }
 
 .header-upper__lang {
     margin-right: 2 * $spacer;
-    margin-top: 0.5 * $spacer;
-
+    
     .dropdown-menu.show {
-        top: 100% !important; // overwriting the general dropdown overwrite
+        top: 100% !important;
     }
 }
 
 .header-upper__nav {
     flex-direction: row;
+    align-items: center;
+}
 
-    // bootstrap overwrites
-    .dropdown-menu {
-        position: absolute;
-    }
+.header-upper__nav .dropdown-menu {
+    position: absolute;
 }
 
 .header-upper__mobile-toggle {
     font-weight: bold;
 }
 
-// so it doesn't look misallighned when menu open
 .header-upper__mobile-toggle.show {
     z-index: 1001;
     background: transparent;
@@ -70,5 +69,4 @@
 
 .header-upper__mobile-toggle.show:after {
     content: "\f00d";
-}
-
+}

adhocracy-plus/assets/scss/components/_header_upper.scss

@@ -6,20 +6,23 @@
 
     <nav class="navbar navbar-expand-md">
         <div class="container position-relative">
-            <a class="navbar-brand header-upper__brand" href="/">
-                <img src="/static/images/logo-mobile.png" alt="{{ settings.a4_candy_cms_settings.OrganisationSettings.platform_name }}" class="header-upper__brand-img header-upper__brand-img--mobile" />
-                <img src="/static/images/logo.png" alt="{{ settings.a4_candy_cms_settings.OrganisationSettings.platform_name }}" class="header-upper__brand-img header-upper__brand-img--desktop" />
-            </a>
+            <div class="d-flex w-100 align-items-center justify-content-between">
+                <a class="navbar-brand header-upper__brand" href="/">
+                    <img src="{% static 'images/logo-mobile.png' %}" alt="{{ settings.a4_candy_cms_settings.OrganisationSettings.platform_name }}" class="header-upper__brand-img header-upper__brand-img--mobile" />
+                    <img src="{% static 'images/logo.png' %}" alt="{{ settings.a4_candy_cms_settings.OrganisationSettings.platform_name }}" class="header-upper__brand-img header-upper__brand-img--desktop" />
+                </a>
 
-            <ul class="header-upper__nav navbar-nav ms-auto">
-                <li class="nav-item header-upper__lang">
-                    {% include 'includes/header_language_switch.html' %}
-                </li>
-
-                <li class="nav-item header-upper__user" >
-                    {% userindicator %}
-                </li>
-            </ul>
+                <div class="d-flex align-items-center">
+                    <ul class="header-upper__nav navbar-nav flex-row">
+                        <li class="nav-item header-upper__lang">
+                            {% include 'includes/header_language_switch.html' %}
+                        </li>
+                        <li class="nav-item header-upper__user">
+                            {% userindicator %}
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </nav>
-</header>
+</header>