Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-48422

Anchors are obscured by the fixed position top bar



    • Bug
    • Status: Closed
    • Major
    • Resolution: Duplicate
    • 2.7.3, 2.8.1, 2.9
    • None
    • Themes


      When using bootstrapbase or any derivative theme if the user clicks on a link with an anchor to a part of the page that requires the browser scroll down the first bit of content at the anchor is obscured by the navigation bar at the top.

      This happens because the navigation bar is fixed position and the browser doesn't take that into consideration when scrolling the anchor into view.
      I don't consider this a browser bug as it is a design consideration in using a fixed position element like the navbar and should be taken into consideration instead in the design of that element.

      We already have a couple of solutions in Moodle to fix this problem in specific places.
      It's worth noting that a very similar problem effects some browsers when the JS api is used to scroll an element into view.
      We have a custom fix for Chrome in Moodle when running behat (which uses the JS api in this way) to make the navbar position: absolute instead of fixed.

      Ideally we should try to find a generic solution for this, one that doesn't require each area be fixed itself, but instead a theme fix as there really does only affect this theme design.
      The problem with area specific fixes like the one made on MDL-46618 is that we wil end up with many of these sorts of fixes over time, each one uses the height of the navbar so if it every changes we will have to update all hacks, they are all solving the exact same problem.

      If you implement a fix for a specific area please link it here so that we can be aware of it.


        Issue Links



              dobedobedoh Andrew Lyons
              samhemelryk Sam Hemelryk
              Huong Nguyen, Bas Brands, Mathew May
              4 Vote for this issue
              9 Start watching this issue