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

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

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
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
Shopify Staff
Shopify Staff
335 31 79

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

1 Like

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