[Silk UI Framework] Auto Hiding Top Navigation Bar/Header using Silk UI

[Silk UI Framework] Auto Hiding Top Navigation Bar/Header using Silk UI

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs

Hi All,


Was wondering if it was possible, with the use of Silk UI to auto hide the header/top navigation bar on mobile devices??
So essentially, when a user scrolls down, the top nav will auto hide itself until the user scrolls back up to the top.


Cheers,

Matt

Hi Matt!


If I correctly understood what you are asking, you can achieve what you want with something like this:

.phone .Header {
    position: relative;
}


This is for Lisbon Template, although it can work on the other templates, but you will probably need to do some other tweaks in your CSS theme.


Let me know if this was what your were aiming for.


Cheers!

Alexandre Santos wrote:

Hi Matt!


If I correctly understood what you are asking, you can achieve what you want with something like this:

.phone .Header {
    position: relative;
}


This is for Lisbon Template, although it can work on the other templates, but you will probably need to do some other tweaks in your CSS theme.


Let me know if this was what your were aiming for.


Cheers!


Hi Alex, 


Not quite, if you look at this website for example: https://hub.rest.com.au/Homepage.aspx 

And emulate it down to mobile size, you'll see that it disappears when scrolling down and when up scrolling it reappears.  

Let me know if this gives you more clarity.


Cheers,

Matt


Solution

Hi Matt!


Now I understand clearly what you need, and this is a bit more complex. This is something that is not out of the box from Silk, although you can still make it.


In order to get this, you will need a javascript / jquery function that checks if the user is scrolling up or down and then adds/removes a class to your .Header (or some other class, it depends on the context).

Then with CSS you should style your .Header with and without the class, and if you want an animation, ou should try to create it only with CSS (to avoid performance issues).

You should add this JS in your Layout WB in order to be rendered in all your pages.


Look at this example https://osvaldas.info/auto-hide-sticky-header


Let me know if this was of some help!

Cheers!

Solution

Alexandre Santos wrote:

Hi Matt!


Now I understand clearly what you need, and this is a bit more complex. This is something that is not out of the box from Silk, although you can still make it.


In order to get this, you will need a javascript / jquery function that checks if the user is scrolling up or down and then adds/removes a class to your .Header (or some other class, it depends on the context).

Then with CSS you should style your .Header with and without the class, and if you want an animation, ou should try to create it only with CSS (to avoid performance issues).

You should add this JS in your Layout WB in order to be rendered in all your pages.


Look at this example https://osvaldas.info/auto-hide-sticky-header


Let me know if this was of some help!

Cheers!

Hi Alex,


Sorry it took so long to get back to you!!
Yes it ended up working, we had to make a few adjustments since we're using a custom theme but we got there in the end!!
Thanks very much for your help!

Cheers,

Matt