How to fix the problem of Sitecore position fixed in Experience editor? - SXA 9.3

Question

How to fix the problem of having the navbar as position: fixed in Sitecore 9.3. I saw some solutions on the blogs, but it only fixes the issue on the Sitecore 8 versions.

Basically when I open the partial design in Sitecore Experience Editor, I have set my navbar as position fixed in theme css file, and it shows the navbar below the scWebEditRibbon. I also saw that scWebEditRibbon is now position fixed, still it does not fix my issue since I also have position fixed on my element.

Answer 1

I fixed the issue by using the script provided Richard Szalay, I just changed the variable as you can see here: Here is the script:

// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
    return {
      priority: 50,
      execute: function (context) {
        // TODO: Change this CSS selector to suit your application
        var FIXED_NAV_SELECTOR = '#navbar';
  
        // the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
        var scWebEditRibbon = window.parent.document.getElementById('scWebEditRibbon'); 
        var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
        if (scWebEditRibbon && 'MutationObserver' in window) {
          var observer = new MutationObserver(function (mutations) {
            nav.style.top = scWebEditRibbon.style.height;
          });
          observer.observe(scWebEditRibbon, { attributes: true, attributeFilter: ['style'] });
        }
      }
    };
  });