How to hide navigation without causing player jumping

Hi Noelle

Without seeing your file it's hard to say but have a look at this sample.  I've created a master slide layout that hides the Prev/Next buttons on timeline start.

In the module I have four slides - two have the normal layout applied where the Prev/Next are displayed and two are based on the layout with the hidden trigger.  Of course the user in my sample has to use the menu to navigate the slides where the buttons are hidden but I'm not seeing any jumping - unless I misunderstand what is happening.

I've attached the file and here it is in Review 

Thanks so much, Wendy. I think the player is staying in place and not jumping because you have the audio icon visible on the bottom. If you remove everything from the bottom the player jumps down to the empty space, then back up again when the navigation returns. So... a quick fix might be to just put the audio icon in there (even though I don't need it).

OH and your method of hiding the navigation on the master slide may have my problem of it briefly showing up and then disappearing again.

The other option is to disable the Next button instead of hiding it completely.  This is what I usually do in projects where I am using the default player nav. 

Yeah, it's pretty horrible isn't it. The player shouldn't change size when there are or are not buttons in my opinion. I either disable them, as Nancy says, or use a slide transition that makes it less obvious (push > up is my go-to) - but obviously that's not always going to work, depending on context.

The problem is, if I show the navigation and just disable it, people start complaining that the navigation doesn't work. Showing the volume icon works... but I wish I could change the colour of it to hide it. I have a fade transition on my slides and hiding the icons is not working as they show briefly while the fade is happening and then disappear. Very frustrating.

Hi Noelle,

Do you have the option of going with custom navigation, and hiding the player entirely?

This would make it much more seamless. If you must have volume control, it would be tricky, but the rest is more straightforward.

Here's some good info on this approach: https://community.articulate.com/series/74/articles/storyline-360-user-guide-how-to-hide-the-player

Here's one approach to the volume control (I have not investigated this one): https://community.articulate.com/discussions/building-better-courses/add-a-custom-volume-controller-in-articulate-storyline-3-or-storyline-360

It is frustrating for sure. The only other thing I could suggest is to hide the player buttons and create your own custom buttons instead. This is a bit of a pain because you can't do a global hide but it does solve the problem.

Thanks all. At this point I don't want to go back and create custom navigation. I'm basically finished the module. For now I'm just putting on the volume control to solve the jumping. I don't need it, but it's the least confusing option for the learners.

Hi Noelle

I know it's not ideal but you could change the colour of the volume icon to blend in with the player - only thing this changes the Prev and Next icons > < if you are using those icons as well.

See this Peek

Just a note that changing the color of the volume icon creates a product that isn't accessible. It's generally something you don't want to do and shouldn't ever be encouraged. If you're going to change the color of the icon, consider hiding it entirely with a simple CSS fix.

$('.cs-button.volume').css('display','none');

Sorry that's the jquery. CSS:

.cs-button.volume { display: none; }

Just add that to the css output of your finished HTML5 file package