Shopify themes, liquid, logos, and UX
Hi I've tried with several different solutions from other community members but didn't seem to work out for my page.
I'm looking to center the logo in the header on my shop. https://ytems-se.myshopify.com
As well as remove the hamburger icon for the mobile version. It's strange because it's gone from the desktop but not mobile.
Any help is really appreciated!
PW is: jotwau
Hi @Ytemsstore, the first thing you need to do is undo all the changes you made which didn't work for you like the hamburger menu.
In your timber.scss file, add this CSS at the end of the file:
.site-header .grid--table>.grid__item {
width: 100%;
}
@media only screen and (min-width: 750px) {
.site-header__logo img {
margin: 0 auto;
}
}
Hi @g33kgirl, thank you so much for you reply!
I tried with what you suggested- but it didn't seem to work.
Do you have any more suggestions?
@Ytemsstore I checked your website. The code itself works but because the menu is hidden, it's not pushing the logo image to the center. Can you undo the hamburger menu code which you tried which you said you want to display on desktop?
@Ytemsstore please see screenshot:
@Ytemsstore the other solution (actually a hack) is through code (modify at your own risk).
Go to Edit code -> Sections -> open header.liquid and change line 140-142 from:
<h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
To:
<h1 class="site-header__logo large--right" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo large--right" itemscope itemtype="http://schema.org/Organization">
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024