Shopify themes, liquid, logos, and UX
Hi
Can anyone please tell me how to put my main menu on one line without reducing the text size. I would also like it to come down slightly to line up with logo. Thanks.
mollycoddle-meg.myshopify.com
Password - preepi
Solved! Go to the solution
This is an accepted solution.
sorry for that issue but i can see now 1 line
This is an accepted solution.
I try to give my best to your site looking good
sorry but here I slightly change the font size of header font
please try to given code in theme.css
.site-header__logo img {
width: 250px!important;
}
This is an accepted solution.
This is an accepted solution.
sorry for that issue but i can see now 1 line
Hi
Sorry for the delay. It must be the computer I am viewing it on. Would you be able to push it over to the right slightly so there the same padding between the logo and the icons on the right?
Thanks
hello @Molly8
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 789px){
.site-header .grid .grid__item:nth-child(3) {
width: 10% !important;
}
.site-header .grid .grid__item:nth-child(3) .site-header__icons-wrapper{
justify-content: center !important;
}
}
Hi
No that didn't work but it may the size of screen i'm viewing it on. I do have the different Shopify views, mobile, desktop and fullscreen but my laptop is only 11 inch. Would this make a difference?
Thanks
Hi
Ive made the font slightly smaller which has now put the main menu into one line but it would be nice to be able to have the main menu moved to the right slightly to fill the gap evenly between the logo and the search, login, basket icons. If thats possible, that would be great.
Kind regards
hello @Molly8
I see your store it's already have to fill the gap evenly between the logo and the search
This is an accepted solution.
I try to give my best to your site looking good
sorry but here I slightly change the font size of header font
please try to given code in theme.css
.site-header__logo img {
width: 250px!important;
}
This is an accepted solution.
Hi
FANTASTIC!! It worked. Thank-you so much for your help.
Hi
Sorry but I've just realised my logo has shrunk considerably. Can this be made bigger? It looks like there is enough room for the padding to shrink slightly.
Thanks.
Hi
Ketankumar sent me an answer with a screenshot of my site and that is the size that I want my logo, thanks.
i mean i can see 1 line now which screen for issue?
Hi
There is no problem now with the single line, thats fine. But I then asked for my main menu to be moved over to the right so I assumed the padding inbetween the logo and the main menu has been changed. This has made my logo smaller.
Regards
can you please provide screenshot further issue
Hi
Thanks for your response.
I'm really struggling to send you a screen shot because it won't accept any image file extension. I converted to mp4 but it wouldn't upload.
I will have to explain instead.
On my header the logo needs to be considerably bigger. It has shrunk, due to I assume, the padding added between the logo and the start of the main menu. Could you give some more room to my logo please.
mollycoddle-meg.myshopify.com
Password - preepi
Thanks in anticipation.
Hi, this is the screenshot you sent me on 02/08/21. This was the original size of my logo before the main menu was moved more to the right. The menu is great now but I would like my logo back to this size please if possible.
can you please try this
header.site-header.border-bottom.logo--left {
background-color: var(--color-body);
}
Hi
No, the logo is the same, too small and it has gotten rid of my two colour bands each side of my header which I want.
Regards
remove top and bottom blank spacing in logo
Hi
I have tried that with no success at the moment. But I am waiting for a reply back from Canva regarding my design to see if they can help.
Thanks for your help so far and I will let you know how I go on.
kind regards
Molly
This is the size of my logo after removing the code you gave me which moved the main menu over to the right. Is there anything that can be changed in that coding to still move the main menu but leave the logo as it is?
Getting desperate now.
mollycoddle-meg.myshopify.com
Password: preepi
Kind regards
Molly
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