1

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.enter image description here

3 Answers 3

5

You can add a new class for your experience editor mode only on body tag

var experienceEditor = Sitecore.Context.PageMode.IsExperienceEditor ? "experience-editor" : string.Empty; 

you can set this variable on body tag like this

<body class ="@experienceEditor"> 

then using this hierarchy in CSS you can set position static or position relative like below code

    <style>
    .experience-editor .header-sticky > .navbar {
    position: relative;
    }
   </style> 

After applying this navbar will not stick on top.

I applied same solution in one of my project, because if we need to write some more styling related to experience specific then we can utilize this experience-editor class added on body tag.

Hope it resolved your issue.

1

There could be a few approaches:

  1. Do not use position:fixed for you navigation bar. There are other ways to set the navigation bar at the top of your page.
  2. Use Javascipt to define Experience Editor mode, find its height and change top position of navigation bar:
var isPageEditor = function(){
    return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
};
 
if(isPageEditor()) {
    // Write your logic to change header position here
    // For Sitecore 9.3 with SXA it is:
    jQuery(".navbar").css("top", jQuery("#scCrossPiece").height() + "px");
    //But it can be different for different Sitecore versions
}
0

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'] });
        }
      }
    };
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.