Minimal Theme - Move Logo in the header

Highlighted
New Member
2 0 0

Hey fellows,

 

I am using the minimal theme in my store at shoptabassum.com

I want to move my logo up in the header so that it shows up something like this on mobile and desktop. This is the screenshot of a fellow merchant using the same theme that I got from one of the forum questions.

header.png

mobile header.jpg

I used a tutorial mentioned by one of the members "mattb348" in the comments section of this thread

I paid someone $30 on Fiverr to do the coding for me, to make my logo show up in the header bar of the Minimal Theme. I made notes of what they did.Here is what you need to do:

 

 

Edits to "header.liquid"(found under "Sections" in the theme code editor)

 

  • Added Custom Code To Make The Logo Appear In The Header Bar(For Mobile ViewANDDesktop View)

 

  • Added The Following Block of Code NearLine 50:

 

 

        {% comment %} *****THE BLOCK OF CODE BELOW MAKES THE LOGO SHOW IN THE HEADER BAR FOR DESKTOP VIEW***** {% endcomment %}

       

        <a href="{{ routes.root_url }}" itemprop="url">

                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                    <img class="logo_header lazyload"

                         src="{{ section.settings.logo | img_url: '300x300' }}"

                         data-src="{{ img_url }}"

                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"

                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"

                         data-sizes="auto"

                         alt="{{ shop.name | escape }}"

                         itemprop="logo">

        </a>

 

        {% comment %} *****THE BLOCK OF CODE ABOVE MAKES THE LOGO SHOW IN THE HEADER BAR FOR DESKTOP VIEW***** {% endcomment %}

 

 

*NOTE:  The Above Block of CodeNeeds To Be AddedRIGHTBELOWTHIS LINE OF CODE:

<div class="post-large--display-table">

 

 

  • Added The Following Block of Code NearLine 161:

 

 

      {% comment %} *****THE BLOCK OF CODE BELOW MAKES THE LOGO SHOW IN THE HEADER BAR FOR MOBILE VIEW***** {% endcomment %}

     

      <a href="{{ routes.root_url }}" itemprop="url">

                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                    <img class="logo_header lazyload"

                         src="{{ section.settings.logo | img_url: '300x300' }}"

                         data-src="{{ img_url }}"

                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"

                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"

                         data-sizes="auto"

                         alt="{{ shop.name | escape }}"

                         itemprop="logo">

      </a>

     

      {% comment %} *****THE BLOCK OF CODE ABOVE MAKES THE LOGO SHOW IN THE HEADER BAR FOR MOBILE VIEW***** {% endcomment %}

 

 

*NOTE:  The Above Block of CodeNeeds To Be Added RIGHTBELOWTHIS LINE OF CODE:

<div class="wrapper post-large--hide">

 

 

 

Edits to "header.liquid"(found under "Sections" in the theme code editor)

 

  • Commented Out a Large Block of Code (36 Lines)To Prevent The Logo From Showing In The Normal Spot, Below The Header Bar

 

  • This Block of Code Should Start OnLine 195Or So (IFThe Code That Puts The Logo In The Header Bar Has Already Been Placed Into the "header.liquid" File)

 

  • The Block of Code That Needs To Be Commented Out Needs To Be Wrapped With THESE Comment Tags:

 

 

      {% comment %} *****THE CODE BELOW IS COMMENTED OUT, WHICH PREVENTS THE LOGO FROM SHOWING IN THE NORMAL SPOT, BELOW THE HEADER BAR***** {% endcomment %}

      {% comment %}

 

>>>The Block of Code Being Commented Out (36 Lines)<<<

 

          {% endcomment %}

          {% comment %} *****THE CODE ABOVE IS COMMENTED OUT, WHICH PREVENTS THE LOGO FROM SHOWING IN THE NORMAL SPOT, BELOW THE HEADER BAR***** {% endcomment %}

 

 

The Block of Code That Needs To Be Commented Out Should End Up Looking Like THIS:

 

 

      {% comment %} *****THE CODE BELOW IS COMMENTED OUT, WHICH PREVENTS THE LOGO FROM SHOWING IN THE NORMAL SPOT, BELOW THE HEADER BAR***** {% endcomment %}

 

      {% comment %}

        <div class="grid--full">

          <div class="grid__item">

            {% if request.page_type == 'index' %}

              <h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">

            {% else %}

              <div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">

            {% endif %}

              {% if section.settings.logo != blank %}

                <noscript>

                  {% capture image_size %}{{ logo_width | escape }}x{% endcapture %}

                  <div class="logo__image-wrapper">

                    {{ section.settings.logo | img_url: image_size | img_tag: shop.name }}

                  </div>

                </noscript>

                <div class="logo__image-wrapper supports-js">

                  <a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">

                    {% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                    <img class="logo__image lazyload"

                         src="{{ section.settings.logo | img_url: '300x300' }}"

                         data-src="{{ img_url }}"

                         data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"

                         data-aspectratio="{{ section.settings.logo.aspect_ratio }}"

                         data-sizes="auto"

                         alt="{{ shop.name | escape }}"

                         itemprop="logo">

                  </a>

                </div>

              {% else %}

                <a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>

              {% endif %}

            {% if request.page_type == 'index' %}

              </h1>

            {% else %}

              </div>

            {% endif %}

          </div>

          {% endcomment %}

 

          {% comment %} *****THE CODE ABOVE IS COMMENTED OUT, WHICH PREVENTS THE LOGO FROM SHOWING IN THE NORMAL SPOT, BELOW THE HEADER BAR***** {% endcomment %}

 

 

ALSO, HERE IS SOME CUSTOM CODE THAT YOU CAN PLACE AT THE VERY BOTTOM OF YOUR "theme.scss.liquid" file(which is found under "assets" in the code enditor). You will likely NEED to use some of this code to control the size and position of your logo when it is in the header, because using the above code to place your logo in the header bar, will override some of the controls for your logo in the theme editor (IE:  controlling the size of your logo through the theme editor won't work anymore, so you HAVE to use the code below for that.)

 

*NOTE:to figure out what the code does, just read the comments / notes I made within the code. 

 

HERE IS THE CODE THAT YOU CAN ADD TO THE BOTTOM OF "theme.scss.liquid":

 

 

/* Below is Custom Code That I Added to Reduce The Margin / Padding For The Bottom of The SITE HEADER (The Default Padding Was 40px and From The timber.scss.liquid File) */

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

/* Below is Custom Code That I Added To Control The Top And Bottom Padding Of The ANNOUNCEMENT BAR (For MOBILE VIEW Only) */

/* Adjusting The Bottom Padding Of The Announcement Bar Stretches The Height Of The Header Bar - So Tweak This To Make The Header Bar The Right Size For The Logo */
/* Additional CSS Properties (IE: "font-size" and "font-family" etc. etc.) Can Be Placed Here, To Modify The "Announcement Bar" Text etc. */

.announcement-bar--mobile {
padding-top: 6px;
padding-bottom: 12px;
}

/* Below is Custom Code That I Added to Adjust The Logo Size And The Logo Margin / Padding etc. */

/* This Block Of Code (.logo_header) Controls The SIZE, POSITION, And MARGIN Of The Logo) */
/* In The UPPER Block Of Code, The Property "top" Controls The Top Margin Of The Logo (For DESKTOP VIEW ONLY) */
/* In The UPPER Block Of Code, The Property "max-width" Controls The Size Of The Logo (For DESKTOP VIEW ONLY) */
/* In The LOWER Block Of Code, The Property "top" Controls The Top Margin Of The Logo (For MOBILE VIEW ONLY) */
/* In The LOWER Block Of Code, The Property "width" Controls The Size Of The Logo (For MOBILE VIEW ONLY) */
/* NOTE: The Code In The LOWER Block Of Code Only Applies To Mobile View, Because Of The "and (max-width: 768px)" Line Of Code (Mobile View is Triggered By Having a Screen Resolution Less Than 769px Wide) */

.logo_header {
position: absolute;
top: 9px;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 180px;

@media all and (max-width: 768px) {
top: 0px;
width: 145px;
}
}

/* Below is Custom Code That Was Added By The Person That I Paid On Fiverr (I'm Not Sure What it Does) */

.header-bar .wrapper.post-large--hide { position: relative; }

This code moved the logo up in the header but did not stop the logo from being displayed in the usual spot below the header as well. So, it ended up displaying 2 logos instead.

Any help in this regard would be appreciated. Thanks.

0 Likes