im trying to make something like this but im confused how can i do something like this
Hi @blackberry , could you share your store URL?
This code customization work. Please provide the store URL and section/header.liquid file code.
Thanks!
Hi @blackberry ,
Can you share your store URL
here you go.
moonsofficial.com here is my url
Hi @blackberry , go to your online store > Sale channels > Online store > Themes > Edit code > Assets > base.css and add those code at the bottom
.header__heading-logo-wrapper {
display: inline-flex !important;
align-items: center;
}
.header__heading-logo-wrapper::before {
content:"moon";
}
.header__heading-logo-wrapper::after {
content:"store";
}
.header__heading-logo-wrapper::before,
.header__heading-logo-wrapper::after { font-size: 20px; font-weight: 700; }
1 Like
hi Dan
thank you for the code
i have added the code and it works perfectly fine expect the spaces the words close to the moon
can you also let me know how to i change font
i want to add font like these.
thanks again Dan
Hi Dan
I’ve managed to fix the font issues.
I just want to fix those words with spaces touching the moon logo
1 Like
Please remove the previous CSS and add this new CSS code.
go to your online store > Sale channels > Online store > Themes > Edit code > Assets > base.css and add those code at the bottom
.header__heading-logo-wrapper {
display: inline-flex !important;
align-items: center;
}
.header__heading-logo-wrapper::before {
content:"moon";
}
.header__heading-logo-wrapper::after {
content:"store";
}
.header__heading-logo-wrapper::before,
.header__heading-logo-wrapper::after { font-size: 20px; font-weight: 700; font-family: Montserrat !important; margin-right: 2rem;margin-left: 2rem; }
Hi @blackberry , you can update this code to add space to words
.header__heading-logo-wrapper::before,
.header__heading-logo-wrapper::after { font-size: 20px; font-weight: 700; }
To this
.header__heading-logo-wrapper::before,
.header__heading-logo-wrapper::after { font-size: 20px; font-weight: 700; padding: 0 10px; }
Thank you @Dan-From-Ryviu for helping me out !!
I’ve managed to fix it .
the only last issue is the moon logo
i want the logo to be slightly smaller than it is now
Thank you @dmwwebartisan for helping me out as well !!
I’ve fixed the font as well as the spaces.
the only last issue is the moon logo
I want the logo to be slightly smaller than it is now
sorry to disturb again but im having problems with my phone web
as you can see the desktop version has 0%opacity (or i dont know whats its called)
the phone version has a big white gap i want the it to look like desktop version over the image with no background
Hi @blackberry please add this CSS code to your file to make mobile banner appear similar in desktop
@media screen and (max-width: 749px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
position: absolute !important;
bottom: 0px;
left: 0px;
}
.banner--mobile-bottom .slideshow__text.banner__box {
background: transparent !important;
}
}
Thank you @Dan-From-Ryviu for helping me out !!
I’ve managed to fix it .
the only last issue is the moon logo
i want the logo to be slightly smaller than it is now.
Hi @blackberry , you can make your logo smaller by adding this CSS code
.header__heading-logo { max-width: 40px !importan; }
You can edit 40px in code to make logo fit your request
thank you it worked perfectly fine!!!
BTW do u know how to fix first contentful paint FCP and Large Contentful Paint LCP
Hi Dan, I have added the same codes as you have mentioned to have a logo with words on each side), but on mobile each word on both sides of the logo are squished on top of each other.. but not when phone is landscape. how can I fix this so that the words aren’t squished up when phone is in portrait mode? Thanks!