Social Slider not working. CSS Transition

Problem

Im new here have seen a lot of this site and videos around the internet and now i have a problem with my CSS fort i would say hello and see if there is any one out there that can help me out. Im righting a website and have a sliding bar on my nav. but the text witch is hiden then shows on hover will not stay on the same line intel it is open full, As im making this site on a local host cant show you sorry but here is the codeā€¦

<p data-height="257" data-theme-id="9309" data-slug-hash="icrwC" data-default-tab="result" data-user="jandrew" class='codepen'>See the Pen <a href='http://codepen.io/jandrew/pen/icrwC/'>Social Slider</a> by jerome Andrew (<a href='http://codepen.io/jandrew'>@jandrew</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

would like it to work

Thanks to any one that can help :) My site as it is at the moo.. lots of work needs doing my site

Problem courtesy of: user2960145

Solution

You could put:

white-space: nowrap;

in the css in ".socialSlider li"

It will prevent the line from wrapping.

Solution courtesy of: Rembunator

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.