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

Highlighted
New Member
3 0 0

Hey guys, I am using minimal theme, and my store is looking like this sephora 1.jpg

how can i do to appear like this : sephora.jpg Like put the logo on the side of the menu bar? 

 

thank you

0 Likes
Highlighted

Hello ,

Please share site URL.

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 134

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:

 

1. From your admin, go to 'Online Store > Themes > Actions > Edit code'.

2. Open up 'header.liquid'  located inside 'Sections' folder.

3. 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;
    }
  }

4. 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 %}

 

5. 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! 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted

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

0 Likes
Highlighted
Tourist
9 0 3

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</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 %}

 

 

 

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  :)

0 Likes
Highlighted
Tourist
9 0 3

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</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 %}

 

 

 

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  :)

0 Likes
Highlighted
Tourist
13 0 2

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

 

 

0 Likes
Highlighted
Tourist
9 0 3

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

       

        <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 Code Needs To Be Added RIGHT BELOW THIS LINE OF CODE:

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

 

 

  • 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 %}

     

      <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 Code Needs To Be Added RIGHT BELOW THIS 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 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 %}

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

Highlighted
Tourist
13 0 2

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

0 Likes
Highlighted
Tourist
9 0 3

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  :)

0 Likes