Option for fixed navbar(s)

[Tristan daCosta]

What do you think about an option to fix the upper navbar (#above-header) and #navwrap to top on scroll? Possibly even extend this to custom alerts also.

[Jeremy Hopkins]

For us the only part of the header we would want to fix is navbar excluding the upper header with messages / profile. I know Fernando wanted to leave that menu, and it seems you would like to show the alerts also, so a setting would seem to be appropriate.

Unfortunately the current solution is not working well and we need to fix that before doing anything else. Specifically it does not work well with the slider / ticker on the front page.

What I had tried to get working was using jQuery "fade out" on scroll to hide the upper divs but could not get it working.

If we can get "fade out" or soemthing similar working for the "on scroll" event then it will be possible to add settings to determine which divs to apply this to.

If you are able to have a play with that it would be really helpful!

[Jeremy Hopkins]

BTW, nice screen shots :-) I was going to add some more layouts for the layout builders like 7-5, 5-4-3 etc to make it a little less grid like.

[Tristan daCosta]

Thanks. I've done the script to make it as shown above but the problem i came across was that the scroll height for setting the fixed class is dependent on the number of custom alerts (if any) on screen. I suppose it could be done that it counts the custom alerts and sets the scroll height though???

Which divs are you looking to fade out? titlecontainer/socialbox/course-header?

[Jeremy Hopkins]

Hi Tristan,

Trying to fade may not be the best option, I looked at other sites which had implemented somehting similar and they actually had different classes / ids for the fixed scroll and used js / jquery to rewrite the class names in the html.

What I had been trying to do was to fix the navbar at the top of the page as shown in this screen shot:

Doing something like:

#page-header-wrapper{
    position fixed;
} 

#above-header {
    display: none;
}

#page-header {
    margin-top: -62px;
}

However this creates a problem with elements below the main navbar not being in the correct position, in our case the news ticker which requires a different top margin when the above is applied.

[Alexander Goryntsev]

Agree with Jeremy - I'd be happy to have only the navbar fixed at the top. Even more - for all of my teaching purposes it'd be enough to have the ONLY menu bar in the header - "top" or "nav" whatever you call it. However other teachers may have other needs. Anyway I think it's better to have one rich and customizable menu area than two ones scarcely used. This idea already has been expressed here before.

[Info 3bits]

Duplicate of #278.