How to set all elements within header on same height(1 line) in supply theme??

Highlighted
Excursionist
76 1 4

Hi all,

I'm struggling with my header, it looks like as follows:

Knipsel.PNG

 

As you can see all the elements are on different heights etc, I'm trying to decrease the headers height and put all elements next to eachother on one line like this:

 

Knipsel.PNG

I also want to delete the text "Winkelwagen" at my shopping cart. Does anyone have a solution how I can achieve this?  Sorry I'm new to Shopify.

 

Website url: http://smartnutrition.nl/ 

Website password: plazay

 

Header section code:

 

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
  <div class="wrapper">

    <div class="grid--full">
      <div class="grid-item large--one-half">
        {% if request.page_type == 'index' %}
          <h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo %}
          {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
          {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
          <a href="{{ routes.root_url }}" itemprop="url">
            <div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
              <div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                <img class="lazyload js"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ logo_alt | escape }}"
                  style="width:{{ section.settings.logo_max_width }}px;">
              </div>
            </div>
            <noscript>
              {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
              <img src="{{ section.settings.logo | img_url: image_size }}"
                srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ logo_alt | escape }}"
                itemprop="logo"
                style="max-width:{{ section.settings.logo_max_width }}px;">
            </noscript>
          </a>
          {% else %}
            <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      <div class="grid-item large--one-half text-center large--text-right">
        {% if section.settings.show_announcement or shop.customer_accounts_enabled %}
          <div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
            {% if section.settings.show_announcement %}
              {% if section.settings.announcement_link != blank %}
                <a href="{{ section.settings.announcement_link }}">
              {% endif %}

                <p>{{ section.settings.announcement_text | escape }}</p>

              {% if section.settings.announcement_link != blank %}
                </a>
              {% endif %}
            {% endif %}

            {% if shop.customer_accounts_enabled %}
              <span class="site-header--meta-links medium-down--hide">
                {% if customer %}
                  {% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
                  {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
                {% else %}
                  {{ 'layout.customer.sign_in' | t | customer_login_link }}
                  <span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
                  {{ 'layout.customer.create_account' | t | customer_register_link }}
                {% endif %}
              </span>
            {% endif %}
          </div>

          <br class="medium-down--hide">
        {% endif %}

        {% include 'search-bar' %}

        <a href="{{ routes.cart_url }}" class="header-cart-btn cart-toggle">
          <span class="icon icon-cart"></span>
          {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a>
      </div>
    </div>

  </div>
</header>

<div id="mobileNavBar">
  <div class="display-table-cell">
    <button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
  </div>
  <div class="display-table-cell">
    <a href="{{ routes.cart_url }}" class="cart-toggle mobileNavBar-link">
      <span class="icon icon-cart"></span>
      {{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>
  </div>
</div>

<nav class="nav-bar" id="navBar" role="navigation">
  <div class="wrapper">
    {% include 'search-bar' %}
    {% include 'mobile-nav' %}
    {% include 'site-nav' %}
  </div>
</nav>

 


Thanks in advance!

0 Likes
Shopify Partner
173 37 42

Hello @NielsSchutte,

Share header section code 

0 Likes
Highlighted

Hello ,

Please share your site url.

So that i can check and let you know.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
76 1 4

Check updated post:)

0 Likes