Bubble Theme – Pagination Helpp

hey sure it’s

batonofhopeuk.org/test

I managed to move the number pagination under the image but it hasn’t reflected on mobile. I also need to move the arrows next to the numbers and also change the colours as mentioned above please.

thank you

So it takes it to the bottom of the image, but I need it to show under similar to the numbers.

This is what we used to move the numbers under the image instead of ontop.

.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav li a.flex-active, .metaslider.ms-theme-bubble .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a:hover{
color: rgba(74,74,74,.80) !important;
}

In regards to the colours we need to change this for both the arrows and the numbers.

We want the round background to be #7EE5E0 and the font or icon to be white #ffffff and then on hover we want the blue to turn black #000000 and again the font to be white #ffffff.

Thank you so much.

Yes it should look like this – https://drive.google.com/file/d/1cyD9ZzzZ7JA2hR0PIlvmRrSIJ_VFAf42/view?usp=sharing

And as I mentioned above, the arrows should be next to the numbers please.

Sorry the numbers part isn’t working. I think its clashing with the css I had added to move the numbers under the image. Can you please send me the full css for moving the numbers under the image and the styling elements too?

Thank you

Sorry its live again. The number buttons aren’t clickable or showing the correct colours.

@rochdesigns sorry to be a pain, we're wanting to go live with this pretty soon. 

The issue I'm having is I can't click on which slide I want to go e.g. I can't click on slide 3. 

Any ideas please? 
This is currently what I have in my css: 


.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav:not(.flex-control-thumbs){
bottom: -40px !important;
}
.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a{
border: 0px solid #000!important;
}
.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav li a.flex-active{
background: #7ee5e0 !important;
}
.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav li a:hover {
background: #000000
}

.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav li a.flex-active, .metaslider.ms-theme-bubble .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a:hover{
color:#fff !important;
}

#metaslider_1191 .flex-direction-nav a {

background-color: #7EE5E0; top: auto;
bottom: -30;
}

@rochdesigns thank you so much thats brilliant!!

I have another question if thats alright please. Can we make the arrows visible at all times not just on the hover?

Thank you