4

The Orbit slider that comes as part of Zurb's Foundation seems to add a class of hide-for-small to the navigation.

I need the navigation to still show up however in order to show my content. I have tried removing the hide-for-small part of the wrapper in jquery.foundation.orbit.js line 59 but the class keeps getting added.

Does anyone have an idea how to remove it?

ndequeker
  • 7,336
  • 6
  • 54
  • 89
onjegolders
  • 1,029
  • 5
  • 20
  • 35
  • In the end I've overridden the CSS of hide-for-small within the given context but it doesn't feel like the best solution – onjegolders Jan 07 '13 at 16:20

3 Answers3

4

You should add .touch .orbit-bullets { display: block; } to your css. Foundation 4 adds the .touch class when using a touch-enabled device, which hides orbit's bullets and arrows.

jmsg1990
  • 165
  • 5
  • 1
    This should actually be marked as the correct answer. Much better for updating Foundation in the future. – JeremyE Feb 10 '14 at 22:32
1

Better yet, add the following to your app.css to over-ride the class:

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

It's more future-proof if you upgrade your Foundation someday.

Ryan Barrington Cox
  • 79
  • 1
  • 4
  • You would want to make sure to apply this ONLY to the Orbit bullets, otherwise the hide-for-small class won't work for other items. – JeremyE Feb 10 '14 at 22:33
-1

Update: Please see jmsg1990's answer as it is the proper way to do this now.

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

At line 60:

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

Simply remove the class "hide-for-small" like below and it works as expected.

directionalNavHTML: '<div class="slider-nav"><span class="right"></span><span class="left"></span></div>'
jtgi
  • 138
  • 1
  • 7