Navbar sticky at the top

[Info 3bits]

No description provided.

[Emma Richardson]

Create an option to have the navbar remain fixed at top of screen while scrolling. This will need to take into account that the alerts sit above the navbar and will need to adjust for those.

[Jeremy Hopkins]

I have thought about this before but was not sure about alerts / top menus. I think just the navbar maybe better as that has all the stuff you would want when looking at corurses and wold look a lot better than trying to show both, I am sure it would be a lot easier to implement too.

[Jeremy Hopkins]

This boostrap plugin looks like it would allow us to scroll down hiding top menu, logo and fix the navbar:

http://getbootstrap.com/javascript/#affix

[Emma Richardson]

Interesting - I guess that those are the links that would be more useful to be stuck at top of page. I had originally thought of the top header being the one that is fixed and I really like the usermenu, but it would be easy to replicate that in the navbar so you have the best of both worlds. What would happen with alerts - would they still sit at the top or just go away with the header? That would probably be simplest and as long as they showed on first page load, it would be fine anyway.

[Jeremy Hopkins]

I was thinking in a couse things like "my courses" and "this course" would be more useful. By comparison I am not sure how often users go to the profile settings?

[Emma Richardson]

Yes, you are right. I am going to add the Preferences/Edit Profile/Reset Password etc in the Tools menu anyway.

[Hartmut Scherer]

I added the following lines to custom CSS. I haven't tested them with alerts.

#page-header-wrapper { width: 98%; position: fixed; } .navbar .btn, .navbar .btn-group { margin-right: 30px; }

[Info 3bits]

Thanks Harmut for the tip but it is more complex when you enable the top alerts.

Anyway, working on it.

[Info 3bits]

Fix #278

→ <<cset 7a5a74dfc05e>>

[Jeremy Hopkins]

This is pretty good but I think would be better if the top menus were hidden leaving only the navbar at the top of the page? Perhaps we should raise another issue to look at this later?

[Info 3bits]

Featured disabled for the moment due several problems with header and alerts.

[Info 3bits]

Issue #418 was marked as a duplicate of this issue.

[Tristan daCosta]

What about this jQuery/CSS solution?

customalertCount - counts the number of elements exist on page with class of "customalert"

customalertHeight - 113px ( which is total height of #above-header + #pageheader) plus customalertCount multiplied by the height of each .customalert

If scroll distance from top is greater than the total customalertHeight, then apply class .navbar-fixed to #navwrap - then add height of nav-wrap and margin-top page element to bottom margin of #page-header-wrapper (43 + 15) so that page content doesn't jump up when #navwrap becomes fixed position.

.navbar-fixed {
top: 0px;
z-index: 100;
position: fixed;
width: 100%;
}

.header-bottom-margin {
margin-bottom: 58px;
}

$(document).ready(function() {
   var customalertCount = $( ".customalert" ).length;
   var customalertHeight = 113+(customalertCount*38);
$(window).scroll(function () {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > customalertHeight) {
      $('#navwrap').addClass('navbar-fixed');
      $('#page-header-wrapper').addClass('header-bottom-margin');
    }
    if ($(window).scrollTop() < customalertHeight) {
      $('#navwrap').removeClass('navbar-fixed');
      $('#page-header-wrapper').removeClass('header-bottom-margin');
    }
  });
});

It's not quite perfect on mobile as navbar is collapsed... but the same principle could be applied.

Another issue would be if the user dismisses any alerts as the jQuery calculates the height from top based on what is there on page load. Dismissing an alert does not refresh page, so scroll height values become unreliable.

[Tristan daCosta]

A slight improvement to this using the offset() function to calculate the height in pixels between #navbar and top of page. Also, calculating #page-header-wrapper bottom margin based on a dynamic #navbar height, which will fix an issue when mobile dropdown menu is displayed.

var heightFromTop = $("#navwrap").offset().top;
$(window).on('scroll', function () {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > heightFromTop) {
      var navwrapHeight = $("#navwrap").outerHeight() + 15;
      $('#navwrap').addClass('navbar-fixed');
      $('#page-header-wrapper').css({"margin-bottom":navwrapHeight+"px"});
    }
    if ($(window).scrollTop() < heightFromTop) {
      $('#navwrap').removeClass('navbar-fixed');
      $('#page-header-wrapper').css({"margin-bottom": "15px"});
    }
  });

[Jeremy Hopkins]

Hi Tristan,

I was looking at doing the same thing using the "if scrollTop() > x pixels" method shown in the top reply on this page:

http://stackoverflow.com/questions/22541364/sticky-navbar-onscroll

So we could say if page scrolled > x hide unwanted divs and make navbar sticky at the top.

I think to do that we may want alternative styles in css and use jquery to rewrite / apply those styles to the page. For example we could have styles with display:none; which could then be applied on scroll.

By using additional css classes we may be able to avoid issues on mobile.

[Hartmut Scherer]

Hi all, I am still playing with the fixed navbar, only using CSS: #page-header-wrapper { position: fixed; } .navbar .btn, .navbar .btn-group { margin-right: 30px; } #above-header { padding-right: 2%; } .navbar-inner { padding-right: 2%; }

I know that there is a problem when I am using alerts, which I am not going to use at our site. While testing the fixed navbar without alerts on a course main page with completion tracking enabled, I observed that the dropdown menu of "This course" disappears after Grades (see screenshot). This is also true for all other dropdown menus. So I can see Assignments in the dropdown menu, but when I move the cursor to them, the dropdown menu disappears.

However, when I scroll down the main class page so that "your progress" is horizontally aligned with the navigation bar, I can use the entire dropdown menu. If editing and completion tracking is enabled, I also have no problems with the dropdown menu. Is that a z-index issue? Can this be fixed with additional CSS?

[Info 3bits]

Thanks Hermut for your comments but it is really more complex because the alerts and the many combinations you can find using alerts.

The position:fixed in page-header-wrapper approach is the used in the past but fails when you display an alert.

[Emma Richardson]

Perhaps an option to use a fixed navbar that disables the alerts would work in the meantime. There are probably a lot of us that like the navbar and the header logo and title features over the alerts.

[Hartmut Scherer]

Answering my own question regarding the problems with the dropdown menu with a sticky navbar on the main class page with completion tracking enabled but ALERTS are DISABLED. It is indeed a z-index issue as I assumed. So for site admins who are NOT using ALERTS (I am fully aware that it is not working with alerts), a sticky navbar seems to be possible with the following CSS (needs to be added to Custom CSS & JS). #page-header-wrapper { position: fixed; } .navbar .btn, .navbar .btn-group { margin-right: 30px; } #above-header { padding-right: 2%; } .navbar-inner { padding-right: 2%; } .path-course-view .completionprogress { z-index: 0; }

In terms of a consistent user experience, the sticky navbar far outweighs alerts. The login/logout button, messages and the navigation bar with a custom menu will always be at the top without scrolling.

The theme that I am using in our production site allows me to enable docking OR accordion block side regions but not both at the same time. So as a site admin I have to decide which feature I want to enable. Following Emma's suggestion, I assume that this choice of features could also be offered in Adaptable.

[Info 3bits]

The code to sticky the navbar is already existing in header.php: https://bitbucket.org/covuni/moodle-theme_adaptable/src/a8205105b952688060add58895851b9814ee698a/layout/includes/header.php?at=master&fileviewer=file-view-default#header.php-160

The first idea was fix all the header but failed due the alerts. We can fix the header using Hartmut's solution, or the already existing, but alerts are still a problem. We can't fix the header without alerts because many users like Adaptable alerts feature. So the final solution must cover all the situations.

What we are trying to do is to fix the top navbar and the navbar. The alerts and header could be compressed. But still can't find a good solution.

The z-index is not a problem if we can find first solve the sticky header.

[Jeremy Hopkins]

Merged in with ae096b6