Shopify themes, liquid, logos, and UX
Does anyone know how to reduce the amount of white space in the header? I don't want to make my logo smaller to make the height of the header smaller.
I'm not very experienced so some help would be much appreciated. I'm using the symmetry theme.
Thanks.
Solved! Go to the solution
This is an accepted solution.
@CrazyBobble- change the number 2 in above code to the number you want and check
Please share store URL.
Thanks!
It's crazybobble.co.uk
Thanks.
@CrazyBobble- if you want something like in given screenshot then please add this css to the very end of styles.css file and check
.pageheader .logo {
padding: 2px 0;
}
Hi, yeah this is what i mean. What would i change to leave a little bit more white space? This is reduced a bit too much.
Thanks.
This is an accepted solution.
@CrazyBobble- change the number 2 in above code to the number you want and check
Hello🙂
Please could you help me to make the logo appear on my page as it is in the image that I send you?
The problem is that if I increase the size of the logo, the size of the header also increases. Because the header keeps the logo inside, but we want them to be independent. In order to increase the size of the logo so that it protrudes a bit from the header.
What is the code and where do we have to modify to make the size of the logo and header independent?
Our page is: https://kongpods.com/
Thank you
@AlexBrowe2- please try this code, adjust number as per need and you can increase logo size from customize options
@media screen and (min-width:749px){
header__logo-image{position: absolute;left: -50px;}
}
@AlexBrowe2- please add given code in theme.css file and check, sorry I forgot to mention it
Hello, please help
I have already added it to the end of theme.css
I want to reduce the height of the header, and that the size of the logo does not change
@AlexBrowe2- sorry again, my bad, please remvoe previous code and ad this, it will make it like screenshot I gave you
@media screen and (min-width:750px){
.header__logo-image{position: absolute;left: -50px;}
}
@AlexBrowe2- add top:-20px to it, so it becomes
.header__logo-image {
position: absolute;
left: -50px;
top: -20px;
}
@AlexBrowe2- remove that media query part to make it work on mobile , so instead of
@media screen and (min-width:750px){
.header__logo-image {
position: absolute;
left: -50px;
top: -50px;
}
}
it will be this only, adjust numbers as per your need to make logo at position you want, you will need to adjust them as per need
.header__logo-image {
position: absolute;
left: -50px;
top: -20px;
}
Thank you very much for your help, there is only one detail missing to make it look good
Overlay the logo on the announcement bar to make it look complete, it has the head cut off
@AlexBrowe2- checking, somehow css not working on it
@AlexBrowe2- please add this css too
#shopify-section-header{z-index: 7;}
@AlexBrowe2- no you did correct, just need !important, so it becomes
#shopify-section-header {
z-index: 7 !important;
}
Thank you so much
Can you solve the following? Add a little more space or blank margin in the indicated area
@AlexBrowe2- add this css and check, adjust number as per need
.shopify-section--apps .shopify-app-block{
margin-bottom: 30px;
}
Thanks
How you could change the following: "Estándar 3 a 4 días laborables" and "Exprés 1 a 2 días laborables"
From the settings configuration I cannot
@AlexBrowe2- hi, please check in customize settings or language settings in online store->themes->actions
actually we do not get shopify checkout file to edit
Hello @suyash1
Only in the mobile version and the "collection" page, this appears that we want to move down so that it is located below the photo and not above.
How can we do it?
Thanks
@AlexBrowe2- please share this page link
Hello @suyash1
https://kongpods.com/collections/x
But you have to see it from the mobile version
Thanks
@AlexBrowe2- this will need multiple css code settings and can affect other pages too, hence I recommend not to do it
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