Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Let's try with this JS code:
Put it in theme.liquid and before the </body> tag
<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>
Go to Assetes/timber.scess.css and past below css at bottom of file.
.supports-js .logo__image
{
z-index: 1000 !important;
}
This is an accepted solution.
Let's try with this JS code:
Put it in theme.liquid and before the </body> tag
<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>
where do I put that please?
@luuquangtinh97 wrote:
Let's try with this JS code:
Thank you - where would I put that?
I edited my reply. Please check again.
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024