Move slide control buttons above image slides.

[memikee]

Hello, I'm trying to move the image slide "dots" up to overlap the slides.

I managed to do this with:

.slideshow__control-wrapper {

position: relative;

margin-top: -100px

}

However the area where you click the buttons stay below the images. (at the previous location of the dots)

can anyone assist me with this?

store https://g484as6sbwknfyvl-66895675693.shopifypreview.com

 

[harivishwakarma · Accepted solution]

Hallo @memikee 

Hallo @Alliance

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;

z-index:3 !important;
}
</style>

If you require any further information, feel free to contact me.

Best regards,

[harivishwakarma · Accepted solution]

Hallo @memikee 

Hallo @Alliance

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;

z-index:3 !important;
}
</style>

If you require any further information, feel free to contact me.

Best regards,

[Dale_Van_Den_He]

Does that work for both the desktop in the mobile version, does it get the dots above the image for both?

[Dale_Van_Den_He]

Does this affect both the desktop and the mobile version?

[memikee · Accepted solution]

Found the solution, but i will leave this post up for anyone wondering how to do the same 🙂

Fix: had to ad the following code below.

.slideshow__controls {
display: relative;
margin-top: -100px;
z-index: 2;
position: relativ;

}

[WebDeskSolution]

Hello @memikee 

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file base.css

Step 3: Paste the below CSS at bottom of the file -> Save

.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    position: absolute;
    left: 0;
    top: 25%;
    display: flex;
    justify-content: center;
    width: 100%;
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[mcclark]

didn't work