How can I overlap and bring a homepage banner button to the front?

Store Design
1

Hello,

I am using symmetry theme. I need to do one thing at the homepage banner button

656565.PNG
656565.PNG399×427 234 KB

This is my theme in this the button is showing underneath I want to overlap and bring it in front like this

545454.PNG
545454.PNG397×215 92.5 KB

So how can I bring the button to front. Please help in it…

2

Hi @guptamanikya ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

Hi @LitCommerce the website is live but this theme is in draft so u won’t be able to view the theme the other theme is live you can check this url https://general0402.myshopify.com/ We want to bring the homepage banner shop now button in mobile downwards as I have explained above

4

Hi @guptamanikya ,

I need to check the link contains the image like the screenshot you sent, so it will help me to send the most accurate instructions.

If it’s not published, can you send me the preview link. I will check it

5

Hello @LitCommerce

Please check I have uploaded the images here https://general0402.myshopify.com/ on the homepage

6

Hi @guptamanikya ,

I checked and it shows like this:

Screenshot.png
Screenshot.png388×824 337 KB

you can set it up like the screenshot, I will help you check it

7

Hey @LitCommerce

I want to bring the button downwards like the image I am attaching

545454.PNG
545454.PNG397×215 92.5 KB

656565.PNG
656565.PNG399×427 234 KB

But in mine button the button is hiding it is not coming in front

8

Hi @guptamanikya ,

Go to Assets > styles.css and paste this at the bottom of the file:

@media (max-width: 767px) {
	#section-id-template--14564283154475__16359276425da8ce46 .slick-list {
		overflow: visible !important;
	}
	#section-id-template--14564283154475__16359276425da8ce46 .image-overlay {
		overflow: visible !important;
	}
	#section-id-template--14564283154475__16359276425da8ce46 .slideshow--navigation-arrows .overlay-text {
		align-items: flex-end;
		bottom: -55px;
		top: auto;
		z-index: 99999;
	}
}

Because this is a slideshow, I just added the code for this section and it only works if your slideshow has 1 block. If you add more blocks, this is not possible with css, you need to change the code again.

Hope it helps!

9

Thank you for the solution @LitCommerce but instead of section if u can give a proper code would work better since template codes do not work when we export theme

10

Hi @guptamanikya ,

As mentioned in the previous answer, if instructions change for all slideshow sections, then if you add multiple block images for slideshow, it may cause an error.

If you still want to change it, you can change the code again like this:

@media (max-width: 767px) {
	.section-slideshow .slick-list {
		overflow: visible !important;
	}
	.section-slideshow .image-overlay {
		overflow: visible !important;
	}
	.section-slideshow .slideshow--navigation-arrows .overlay-text {
		align-items: flex-end;
		bottom: -55px;
		top: auto;
		z-index: 99999;
	}
}

Hope it helps!

11

Hello @LitCommerce

I want to reduce spacing between text and buttons but when I am bringing them down the text is hiding when I am doing applying margin bottom can u please check it

12

Hi @guptamanikya ,

Please add code:

@media (max-width: 767px) {
	.section-slideshow .slick-slider {
		z-index: 9;
	}
}

Hope it helps!