(Supply Theme) Logo in the Nav Bar on Mobile?

New Member
1 0 0

I've searched these forums looking for the answer and can't find it. A few people have asked the same question but none have provided any answers. Is it not possible? 

I'd simply like to transition my logo into the center of the Mobile Nav Bar. The logo currently sits underneath the Nav Bar on Mobile and takes up a great deal of space. My end goal is to completey remove the Site Header and to just put the logo in the Nav Bar. I'm really happy with the way it looks on computer but mobile is the main problem and is where most of my customers are coming from. 

0 Likes
New Member
1 0 0

Yeah i want to do the same because we have to optimize our store for mobile so this could be awesome. If someone can help us =)

0 Likes
Tourist
3 0 1

Old thread is old, but I'm trying to do this on my own site and I think I have it figured out...

I'm working in the Supply theme.

As always, please make sure to back up your theme before doing anything, and make notes when possible in your code.

 

<!-- Comment like this -->

 

Open up the header.liquid file and search for the mobileNavBar div. You should find this:

 

<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="/cart" 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>

 

This is essentially the code saying saying "Our navigation bar functions as a table. There are two equal cells; one holds the hamburger menu and the other holds the cart."

 

We want to change this so we add one more cell to the table that will hold the logo that functions as a link to the homepage.

I'm going to pull the logo from earlier in the code, change it a little, and stick it in that table.

 

Between the two table cell divs, add this:

 

<div class="display-table-cell">	<!-- ADDING LOGO TO TABLE -->
    <a href={{ shop.url }}>
      <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; padding: 10px 0 10px 0;"> <!-- CAN CHANGE PADDING AS NECESSARY -->
    </a>

 

So overall now you should see this:

 

<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">	<!-- ADDING LOGO TO TABLE -->
    <a href={{ shop.url }}>
      <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; padding: 10px 0 10px 0;"> <!-- CAN CHANGE PADDING AS NECESSARY -->
    </a>
  </div>
  <div class="display-table-cell">
    <a href="/cart" 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>

 

Now your logo should be in the center of the nav bar only on mobile. When you click it it should bring you to the homepage.

Next, we need to remove the header.

 

Open up your theme.scss.liquid and find the Site Header section.

You should find something like:

.site-header {
  padding: $gutter/4 0;
  height: 10;
  background-color: $headerBackground;
  color: $headerText;
  
  @include at-query ($min, $large) {
    padding: $gutter/2 0;
  }

  &.site-header--hidden {
    @include at-query ($max, $medium) {
      display: none;
    }
  }

We need to tell the theme to not display the header when the screen is mobile-sized.

Add this below color: $headerText;:

@media screen and ( max-width: 740px ) {	/////REMOVING HEADER ON MOBILE
    display: none;
  }

If the width doesn't seem right you can change it, but this works for me.

 

You should now see something like this:

.site-header {
padding: $gutter/4 0;
  height: 10;
  background-color: $headerBackground;
  color: $headerText;
  
  @media screen and ( max-width: 740px ) {	/////REMOVING HEADER ON MOBILE
    display: none;
  }

  @include at-query ($min, $large) {
    padding: $gutter/2 0;
  }

  &.site-header--hidden {
    @include at-query ($max, $medium) {
      display: none;
    }
  }

  .site-header--text-links a {
    color: $headerText;

    &:hover {
      opacity: 0.9;
    }
  }

Altogether, this should result in the header being hidden on mobile, with only the nav bar with logo showing.

 

----------
I'm an employee of a site that uses Shopify. My comments are not a reflection of a suggestion from or the opinion of the company I work for, but my own opinion.
0 Likes