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

Highlighted
Explorer
167 2 8

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
Highlighted
Shopify Partner
297 56 71

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 Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Explorer
167 2 8

Check updated post:)

0 Likes
Highlighted
New Member
2 0 0

Hi Wahab, I want the same help.. can you pls help?


0 Likes
Highlighted
Shopify Partner
297 56 71

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

header.site-header {
padding: 0px;
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

0 Likes
Highlighted
Shopify Partner
297 56 71
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file
 
@media only screen and (max-width: 768px) {
  .h1.header-logo {
    display: none;
}
}
 
 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
New Member
2 0 0

Hi Wahab,

 

How can I remove logo mobile site as it is taking good amount os space in the screen. Or can I add in the header itself between menu & cart button?

 

 

Also, I am not able to connect to my Facebook page. Below error is coming. Pls help.

 

500 Internal Server Error
If you are the administrator of this website, then please read this web application's log file and/or the web server's log file to find out what went wrong.


 

0 Likes