FROM CACHE - en_header

Mimimal theme - logo on mobile

Solved
BonzaDogTreats
Shopify Partner
53 0 11

Quick coding help please - my logo doesn't show on mobile. Could anyone help me with how to code that please. I've tried a couple of things but they didn't work. Website is www.bonzadogtreats.com.au

 

Thank you

Accepted Solution (1)

Accepted Solutions
luuquangtinh97
Shopify Partner
20 4 5

This is an accepted solution.

Let's try with this JS code:

 

Put it in theme.liquid and before the </body> tag

 

luuquangtinh97_0-1656572138991.png

 

 

 

<script>
$(function(){
function headerFixed(){
    var shopify_section_header = $('#shopify-section-header'),
        header_bar = shopify_section_header.find('.header-bar'),
        site_header = shopify_section_header.find('.site-header'),
        site_header__wrapper = site_header.children('.wrapper');

    if($(window).width() > 768){
      site_header__wrapper.css('margin-top', header_bar.height() - 30);
    } else{
      site_header__wrapper.css('margin-top', header_bar.height() - 15);
    }
  }
  
  headerFixed();
  	
  $(window).resize(function(){
    headerFixed();
  })
})
</script>

 

View solution in original post

Replies 7 (7)
DelightLoyalty
Shopify Partner
842 67 109

@BonzaDogTreats 

 

Go to Assetes/timber.scess.css and past below css at bottom of file.

 

.supports-js .logo__image
{
z-index: 1000 !important;
}
Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
luuquangtinh97
Shopify Partner
20 4 5

This is an accepted solution.

Let's try with this JS code:

 

Put it in theme.liquid and before the </body> tag

 

luuquangtinh97_0-1656572138991.png

 

 

 

<script>
$(function(){
function headerFixed(){
    var shopify_section_header = $('#shopify-section-header'),
        header_bar = shopify_section_header.find('.header-bar'),
        site_header = shopify_section_header.find('.site-header'),
        site_header__wrapper = site_header.children('.wrapper');

    if($(window).width() > 768){
      site_header__wrapper.css('margin-top', header_bar.height() - 30);
    } else{
      site_header__wrapper.css('margin-top', header_bar.height() - 15);
    }
  }
  
  headerFixed();
  	
  $(window).resize(function(){
    headerFixed();
  })
})
</script>

 

Shop_Lovers
Shopify Partner
252 37 58

Use Below CSS to fix the issue.

However there in no code for mobile header in the theme

 

@media only screen and (max-width: 480px)

.supports-js .logo__image {
    z-index: 1000 !important;
    left: 155px;
    top: 20px;
}

}

 

 

Hit Like and Accept as Solution

Having 7+ years of experience
★★★ Shopify | Shopify Speed Optimization ★★★
Do not hesitate to contact me via Message
Hit Like and Accept as Solution
Free Website Audit
Drop Email in Comment to get in Touch
BonzaDogTreats
Shopify Partner
53 0 11

 

where do I put that please?

BonzaDogTreats
Shopify Partner
53 0 11

@luuquangtinh97 wrote:

 

Let's try with this JS code:

 

 

 

 


 Thank you - where would I put that? 

luuquangtinh97
Shopify Partner
20 4 5

I edited my reply. Please check again.

BonzaDogTreats
Shopify Partner
53 0 11

@luuquangtinh97 wrote:

I edited my reply. Please check again.


Perfect, thank you so much