Shopify themes, liquid, logos, and UX
Hi, I have debut theme for my shop, and I would like to make some changes for the text on the theme.
1) I would like to move the text from the bottom of the picture to the top of the picture.
2) On the top photo of the shop, I would like to move the text to the left incl. the button.
3) also does anyone know how to change the color behind the logo og menu bar?
Best regards Zandra
Hello kilde,
Please share your site url.
So that i can check and let you know the exact solution here.
Hello kilde,
2) On the top photo of the shop,to move the text to the left incl. the button.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
@media only screen and (min-width: 750px){
#shopify-section-hero-1 .page-width.text-center {
text-align: left!important;
}
#shopify-section-hero-1 .rte-setting.mega-subtitle {
margin: 0px!important;
}
}
3) To change the color behind the logo og menu bar.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
.site-header.logo--center {
background-color: pink;
}
.site-header.logo--center .grid.grid--no-gutters.grid--table.site-header__mobile-nav {
background-color: pink;
}
Change the color as per your choice.
Hope this will work for you.
Thanks....
Thank you very much.
3) for the color, it doesn't color the menu bar? do you know why?
Also do you know any solution of my question no. 1?
Thank you in advance.
Hello @kilde
Your site is password protected please share password.
So that I can check and let you know the exact solution for this.
Thanks...
You should be able to check now. Same password as above: shopi2. Thanks
Hello @kilde,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file
.page-width.text-center {
margin: 0px;
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com
Hello @kilde
for changing background color of menu bar used following code :
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
#shopify-section-header .site-nav {
position: relative;
text-align: center;
margin: 0;
background: #D9BDBD !important;
padding: 20px;
color: #fff;
}
.border-bottom {
border-bottom: none;
}
.site-nav__label {
border-bottom: 1px solid transparent;
color: #fff !important;
font-weight: bold;
}
.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
border-bottom-color: #fff !important;
}
.site-nav__link .icon-chevron-down {
fill: #fff;
}
Hope this will work for you
Thanks....
Thank you so much. It all works.
Now the only thing I can't do is below:
1) I would like to move the text from the bottom of the picture to the top of the picture.
2) and also change the size of the text on the hero, too small?
And another small question regarding the color. How to change on the background color of dropdown menu, without changing the color the entire background of the website?. Thanks
Hello @kilde
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
.site-nav--has-dropdown #SiteNavLabel-feng-shui-indretning {
background: #c5bdb1;
}
Hope this will work for you
Thanks....
Thanks, that worked for the drop down.
Do you know about the other solution?
Hello @kilde
Changes regarding to
1) I would like to move the text from the bottom of the picture to the top of the picture.
2) and also change the size of the text on the hero, too small?
Please specify screenshot related to which text you want to move and change the size of text.
So that I can check and let you know the exact solution for this.
Thanks...
Hi, thank you. Pls find photo here, for moving the text above the photos.
The other thing I asked about, I fingered it out.
are you able to help me please?
i want to move the heading text on my homepage slightly down
so that the text isn't across the main picture i want it slightly nearer the bottom
Hello tmm1996,
Please share your store URL with password (If Needed), So that I will give you proper solution here !
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