Geek Answers Handbook

Base Orbit slider, show navigation on small screens

The Orbit slider, part of the Zurb Foundation , adds a hide-for-small class to navigation.

I need the navigation bar to still display to show my content. I tried to remove the hide-for-small portion of the wrapper in the jquery.foundation.orbit.js 59 line, but the class continues to be added.

Does anyone have an idea how to remove it?

+4
source share
3 answers

Update: see jmsg1990 answer as this is the correct way to do it now.

Just ran into this problem and solved it quite easily by opening jquery.foundation.orbit.js.

On line 60 :

 directionalNavHTML: '<div class="slider-nav hide-for-small"><span class="right"></span><span class="left"></span></div>'

Just remove the "hide-for-small" class as shown below and it works as expected.

 directionalNavHTML: '<div class="slider-nav"><span class="right"></span><span class="left"></span></div>'
-1
source

You must add .touch .orbit-bullets { display: block; } .touch .orbit-bullets { display: block; } to your css. Foundation 4 adds the .touch class when using a touchscreen device that hides the orbits and arrows of arrows.

+3
source

Even better, add the following to the app.css application:

 .hide-for-small { display: block !important; }

This is a more secure future if you ever upgrade your fund.

+1
source

More articles:


All Articles