Rev slider navigation disappear on mobile

[lobsterass]

Hi!

My revslider navigation thumb-buttons disappear on mobile (Safari, iPhone) on this page. Even though my rev slider mobile settings are set as you can see in attached image, I can’t see it the way it is on the computer (also attached image). I don’t even have any nav arrows on the mobile.

Does it have anything to do with that my “Navigation Vertical Offset” is set to -160?

How can I fix this?

Thanx!

<3

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.tp-bullets, .rev_slider_wrapper > .tp-leftarrow, .rev_slider_wrapper > .tp-rightarrow {
  display: block!important;
}

– Kyle

[lobsterass]

Hi Kyle!

No…sorry, it didn’t work. No change.

<3

[Kyle – SUPPORT]

I don’t see the code in your custom css?

– Kyle

[lobsterass]

Cuz I removed it when it didn’t work. It’s back now though.

I can’t keep W3 Total Cash inactive though. It makes my site embarrassingly slow.

[Kyle – SUPPORT]

It’s the cache that’s not changing the css, you need to empty the cache for WP Total Cache

– Kyle

[lobsterass]

OK. Thanx. Now, the nav arrows show and stays (ugly) :), but nothing happens when one clicks on them. My custom nav thumbs shows but are too far below the rev slider on a mobile unit. Please see image.

I would love not having any arrows while moving up my nav thumbs closer to the rev slider. I want to keep their placement on a regular computer though.

How would you solve this, Kyle?

[Kyle – SUPPORT]

First try changing the css to this:

.tp-bullets {
  display: block!important;
}

– Kyle

[lobsterass]

Arrows are still there….and they are not clickable so they don’t make sense to me.

I’d rather remove the arrows and move up the thumb nav on mobile units. Isn’t that possible?

[Kyle – SUPPORT]

Remove this from the top of your custom css:

.tp-bullets, .rev_slider_wrapper > .tp-leftarrow, .rev_slider_wrapper > .tp-rightarrow {
  display: block!important;
}

Then add this below your last CSS

.tp-bullets.tp-thumbs {
  display: block!important;
  bottom: -100px!important;
}

– Kyle

[lobsterass]

Hi! Done. I had to change it to -160px:

.tp-bullets.tp-thumbs {
display: block!important;
bottom: -160px!important;
}

because otherwise the thumbs cover the slider, when viewed on a computer. Unfortunately, it looks the same now on a mobile device. The nav thumbs are too far down.

How would you solve this problem, Kyle? I’m open for new suggestions but the point with my nav thumbs is that the media source logo is there to intuitively tell the viewer in what media the article was published.

<3

[Kyle – SUPPORT]

Change the css to:

@media only screen and (max-width: 768px) { 
.tp-bullets.tp-thumbs {
display: block!important;
bottom: -160px!important;
}
}

– Kyle

[lobsterass]

I’m sorry sweetie but it still looks the same.

[Kyle – SUPPORT]

You said that -160 works for you, correct? All I did was tell you to add it within a media query so that the css only applies for widths less than 768px

– Kyle

[lobsterass]

Hmm….but it looked the same for me on my mobile. I cleared cache (W3 Total Cache) and restarted the iPhone to check it too. Did I forget to do something else?