Move header and CTA button to the left [Theme Narrative]

tmengttm
Tourist
4 0 2

Hi! 

I'm using Narrative theme, but I'd like to adjust the header line "A ride for every lifestyle" and the CTA button to left align with the menu icon, and also make sure it's responsive on mobile. As the example shown below. Do you know how to adjust the code to achieve this? Many many thanks!

Screenshot 2020-07-23 at 9.19.22 PM.png

 

Screenshot 2020-07-23 at 9.09.34 PM.png

dmwwebartisan
Shopify Partner
7370 1746 2334

Hey @tmengttm 

I read your description. Can you please provide your webshop URL?

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
tmengttm
Tourist
4 0 2

Hey Thanks 

dmwwebartisan
Shopify Partner
7370 1746 2334

@tmengttm 

Please add following code in your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
.slideshow__heading {
display: block;
max-width: 916px;
text-align: left;
}

.slideshow__heading-cta {
margin-top: 60px;
left: 20%;
}

}

Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
tmengttm
Tourist
4 0 2

Hey dmwwebartisan, thanks for your reply! I tried, but it doesn't work. It doesn't make the heading and button aligned with the left menu icon, and when resize the browser, it doesn't look like responsive properly. But thanks a lot for your reply

0 Likes
Algalsc
Excursionist
29 0 6

Hi, my website is www.perfectdd.com and I'm trying to align the homepage header text and CTA button to the right above the "32DD..." - I can't seem to align it, can you please help? Also, on mobile, the CTA button is on the middle of the screen instead of below. Please let me know if you can help solve these two. I am a paying Shopify customer and using a Shopify supported Narrative theme. Thank you!

Algalsc_0-1622701532570.png

 

0 Likes
Natztech
Shopify Partner
1385 389 944

hello @Algalsc 

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: 750px){
 .slideshow--adapt.slideshow--center-cta .slideshow__heading-cta.btn{
    position: absolute;
    left: 50% !important;
    top: 0 !important
 }
 .slideshow__text-container.page-width .slideshow__text-content.has-animated .slideshow__heading.h1{
     position: absolute !important;
      left: 50% !important;
 }
 }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Algalsc
Excursionist
29 0 6

 Thank you! That worked for desktop but the CTA button on mobile is covering the slideshow image. Is there any way to move the button on mobile below the image by the header text?  

Algalsc_0-1622707537893.png

 

0 Likes
Natztech
Shopify Partner
1385 389 944

hello @Algalsc 

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 (max-width: 749px){
 .slideshow--adapt.slideshow--center-cta .slideshow__heading-cta.btn{
    position: absolute;
    left:35% !important;
    top: 50% !important
 }
 }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Algalsc
Excursionist
29 0 6

The button is still covering the image, is it possible to move the button down? 

Algalsc_1-1622708644057.png