Minimal theme, how to put the logo on the right of menu bar

Tran · August 30, 2019, 9:27pm

Hey guys, I am using minimal theme, and my store is looking like this

how can i do to appear like this :

Like put the logo on the side of the menu bar?

thank you

oscprofessional · September 3, 2019, 12:09pm

Hello Tran,

Please share site URL.

May · September 6, 2019, 4:51am

Hi, @Tran !

This is May from Shopify.

I love the idea of having your header elements all in one place. With doing this adjustment, it is important to note that you will want to keep your logo simple so that it doesn’t overwhelm your header. Are you wanting this modification for mobile view only like the screenshots you’ve attached? If so, I have written some steps on how to achieve this for mobile view. I am not an expert in coding but I do know the basics of it, so here’s an instruction on how to make this adjustment. Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results. After you do so, you can follow the steps below:

From your admin, go to ‘Online Store > Themes > Actions > Edit code’.
Open up ‘header.liquid’ located inside ‘Sections’ folder.
In this file, search for</style>, and paste the following code right above it.

@media only screen and (max-width: 769px) {
    .site-header__logo {
      display: none;
    }
  }

Then, search for layout.cart.title. You should find this code in two sections; you’ll want to go to the second section. Paste this code after the closing </a> tag.

{% if template.name == 'index' %}
        <h1 class="site-header__logo-small{% 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="/" 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="/" itemprop="url">{{ shop.name }}</a>
      {% endif %}
      {% if template.name == 'index' %}
        </h1>
      {% else %}
        </div>
      {% endif %}

Click ‘Save’.

After you save your changes, your logo/store name should be in between the menu and the cart on the header, like thisFor future reference, if you would like to change your header back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts.

Let me know if you have any follow-up questions.

Cheers!

coupleoftees · December 28, 2019, 7:09pm

Hi May,

I have faced an issue with my store after this code is updated on my store, would you be able to assist me on it?

Appreciate if you can message me. Thanks

Beyblade-Gamer · February 19, 2020, 7:48pm

I am using the Minimal Theme, and I too want my Logo to appear in the Header (in between the Menu And The Cart)

I did what May suggested, which was:

Open up ‘header.liquid’ located inside ‘Sections’ folder.

In this file, search for, and paste the following code right above it.

@media only screen and (max-width: 769px) {
    .site-header__logo {
      display: none;
    }
  }

Then, search for layout.cart.title. You should find this code in two sections; you’ll want to go to the second section. Paste this code after the closing tag.

{% if template.name == 'index' %}
        <h1 class="site-header__logo-small{% 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="/" 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="/" itemprop="url">{{ shop.name }}</a>
      {% endif %}
      {% if template.name == 'index' %}
        </h1>
      {% else %}
        </div>
      {% endif %}

This DID in fact work for me, BUT, I want my logo to show up in the Header for DESKTOP View as well (the above fix ONLY applies to Mobile View.)

The other issue is that the above code ONLY applies to the Homepage, because of two {% if %} tags that tell it to only apply to the “index” template (which appears to be the homepage only.)

I had to modify these two {% if %} tags From THIS: {% if template.name == ‘index’ %}

To THIS: {% if ‘’ %}

Note how I had to put the two stupid ‘’ marks in there ‘like this’ but with no words in between… it is NOT an actual quote mark, it is two of these next to each other: ’

This stupid hack DID completely work though… it made it so my logo showed up in my header where I wanted it to, on the Homepage, AND everywhere else, which was what I wanted (but it still only applies to Mobile view, and not Desktop view.)

I tried to just remove the two instances of the {% if template.name == ‘index’ %} tags entirely, but then I would get errors, even after trying to find and remove the closing {% endif %} tags (probably because there were other ‘if’ related tags in there, like {% elseif %} etc.

So does anyone know how to change this code so that it will work on Mobile AND Desktop view?

And does anyone have a better way to make this work for more than just the homepage?

Sure, my stupid {% if ‘’ %} tag hack works… but I hate having to do it like that… just seems like I’m asking for trouble. And I’m guessing that my “hack” probably just tricks the {% if %} tag into thinking if it meets ANY (or NO) criteria, that it needs to activate… thus making it activate under any and ALL circumstances?

Lastly, I will gladly PAY anyone that solves this problem, $30 via Paypal (or through another Payment channel, if possible.)

P.S. I don’t expect a response from “May”, because apparently May has left the building… because she hasn’t responded to any forum posts for many months now it seems

Beyblade-Gamer · February 19, 2020, 7:57pm

I am using the Minimal Theme, and I too want my Logo to appear in the Header (in between the Menu And The Cart)

I did what May suggested, which was:

Open up ‘header.liquid’ located inside ‘Sections’ folder.

In this file, search for, and paste the following code right above it.

@media only screen and (max-width: 769px) {
    .site-header__logo {
      display: none;
    }
  }

Then, search for layout.cart.title. You should find this code in two sections; you’ll want to go to the second section. Paste this code after the closing tag.

{% if template.name == 'index' %}
        <h1 class="site-header__logo-small{% 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="/" 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="/" itemprop="url">{{ shop.name }}</a>
      {% endif %}
      {% if template.name == 'index' %}
        </h1>
      {% else %}
        </div>
      {% endif %}

This DID in fact work for me, BUT, I want my logo to show up in the Header for DESKTOP View as well (the above fix ONLY applies to Mobile View.)

The other issue is that the above code ONLY applies to the Homepage, because of two {% if %} tags that tell it to only apply to the “index” template (which appears to be the homepage only.)

I had to modify these two {% if %} tags From THIS: {% if template.name == ‘index’ %}

To THIS: {% if ‘’ %}

Note how I had to put the two stupid ‘’ marks in there ‘like this’ but with no words in between… it is NOT an actual quote mark, it is two of these next to each other: ’

This stupid hack DID completely work though… it made it so my logo showed up in my header where I wanted it to, on the Homepage, AND everywhere else, which was what I wanted (but it still only applies to Mobile view, and not Desktop view.)

I tried to just remove the two instances of the {% if template.name == ‘index’ %} tags entirely, but then I would get errors, even after trying to find and remove the closing {% endif %} tags (probably because there were other ‘if’ related tags in there, like {% elseif %} etc.

So does anyone know how to change this code so that it will work on Mobile AND Desktop view?

And does anyone have a better way to make this work for more than just the homepage?

Sure, my stupid {% if ‘’ %} tag hack works… but I hate having to do it like that… just seems like I’m asking for trouble. And I’m guessing that my “hack” probably just tricks the {% if %} tag into thinking if it meets ANY (or NO) criteria, that it needs to activate… thus making it activate under any and ALL circumstances?

Lastly, I will gladly PAY anyone that solves this problem, $30 via Paypal (or through another Payment channel, if possible.)

I do NOT want to give a url to my store, or allow access to it…

P.S. I don’t expect a response from “May”, because apparently May has left the building… because she hasn’t responded to any forum posts for many months now it seems

Avec · April 24, 2020, 8:49am

Hi everyone,

I’ve tried to run this change on my site (Minimal theme) although for me it didn’t work successfully.

It did hide my logo on mobile, but when it tried to inject it in the header, it appeared just below instead.

I’d really like this to work and, after being assured by Shopify Support that the Theme team had okayed to do the work, they then emailed to say they wouldn’t. Incredibly frustrating to be honest (especially when this functionality exists out of the box on other Shopify themes.

Any further information on how this can be achieved would be gratefully received - site is www.AvecEnvie.com

Thanks

Beyblade-Gamer · April 24, 2020, 2:04pm

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 View AND Desktop View)
Added The Following Block of Code Near Line 50:

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

{% 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”>

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

*NOTE: The Above Block of Code Needs To Be Added RIGHT BELOW THIS LINE OF CODE:

Added The Following Block of Code Near Line 161:

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

{% 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”>

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

*NOTE: The Above Block of Code Needs To Be Added RIGHT BELOW THIS LINE OF CODE:

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 On Line 195 Or So (IF The 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 %}

{% if request.page_type == ‘index’ %}

{% else %}

{% endif %}

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

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

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

{% 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”>

{% else %}

{{ shop.name }}

{% endif %}

{% if request.page_type == ‘index’ %}

{% else %}

{% endif %}

{% 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; }

Avec · April 24, 2020, 6:00pm

Thanks so much for this Matt (very thorough) - I will take a look

Beyblade-Gamer · April 24, 2020, 6:10pm

No problem.

Should do the trick for you.

I know it is a pain in the butt, but it should definitely work, if you are using the Minimal theme. And it fixes it for Mobile AND Desktop view.

And trust me, you won’t find this solution anywhere else… only other option is to pay someone to do it for you (best / cheapest place for that is fiverr.)

Shame on Shopify support for not helping with this

Ralph32 · May 9, 2020, 11:45am

Thanks for sharing the code. I wish I had read down to the end of the thread before trying the first solution. This is a much better fix.

Beyblade-Gamer · May 9, 2020, 3:46pm

Sure np. Glad it is helping people.

And yes, this is a much better fix than the one provided from the (former) shopify staff.

It works both mobile AND Desktop view, and I even gave the extra code needed to control the settings for the logo size/position etc. too (since doing this modification overrides the normal logo size controls that you get through the theme editor.)

Avec · May 11, 2020, 9:29am

This is totally how these message boards should be used - not by developers looking for opportunities, but as a breeding ground of information and resource.

Hat off to you Matt!

Julesapearce · September 29, 2020, 8:59am

hi, i have followed these instructions but cannot seem to get my logo/storename to appear in the bar? i am after it looking just as you showed in your example? any suggestions? could it be my colour settings although i think these are fine?

artworkandprints.myshopify.com

Julesapearce · September 29, 2020, 9:23am

this was really helpful thank you - how do i get it to be central? it has gone to the left?

thanks in advance for your help

bgstore · November 20, 2020, 3:04pm

it didn’t work for me

llcorporation · December 13, 2020, 3:17am

Hey.. I’m still having a little trouble with this. But it seems to be the only thing that works. Could you help me?

Manojsahoodev · April 5, 2021, 11:56am

Hii May

I have added the same code but it only did the same for my home page, it is not reflecting to the other page. Do you have any solution so that I can add my logo completely to the menu bar only for mobile and that too it should be visible in every page

thevista888 · October 2, 2021, 6:50am

Hey @Beyblade-Gamer ,

I cant describe how appreciated I am, thank you so much for sharing this beautiful codes with us and your generosity. With some custom changes, I made my website look like the way I want it to be. You’re a saint. Bless you!

nar_52 · November 20, 2022, 4:33pm

Thank you so much. Your shared code works perfectly.

Topic		Replies	Views
Desktop Logo and Mobile Logo for shopify theme Technical Q&A	0	0	July 25, 2021
How can I add a mobile logo to my theme if it does not support it? Focal Store Design	8	20	November 9, 2021
How to change header-menu layout Envy Theme Store Design	18	8	July 21, 2022
How do I get my hamburger menu on the left mobile Store Design	13	2	June 8, 2023
How can I center my logo and adjust dropdown menu position on mobile? Store Design	10	0	August 6, 2022

Minimal theme, how to put the logo on the right of menu bar

Related topics