Provide Olivero theme settings to control the behaviour of the header regions

Definitely +1.

ps. please don't contribute jQuery anymore. Is it even supported since Drupal 9? ;-)

+1

jQuery should be deprecated

if would be nice if Bootstrap 5+ will be incorporated in to the theme instead of the current css+js

Big +1 from me. I'm currently looking at CSS overrides or customising js to see if I can make it work.

+1 here too.

Another +1.
The option to enable a custom CSS file for overrides without creating a subtheme would be great!

Can you help me ? Here are the modifications made to my Olivero subtheme. You can test it works.

My problem is that when I resize the window, the menus collapse. You have to reload the page so that it automatically unfolds in mobile mode.

scripts.js :

(function (Drupal, window, document) {
  // Automatically expands the menu on mobile devices.
  function expandMobileNav() {
    if (!Drupal.olivero.isDesktopNav()) {
      document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
        Drupal.olivero.toggleSubNav(menuItem, true);
      });
    }
  }

  // Fixes the navigation bar on mobile regardless of `isDesktopNav`.
  function ensureMobileNavFixed() {
    const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
    function adjustNavFixation() {
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    }
    adjustNavFixation();
    window.addEventListener('resize', adjustNavFixation);
  }

  // Applies or removes the header shadow based on page scrolling, only in mobile view.
  function toggleHeaderShadow() {
    const headerInner = document.getElementById("site-header__inner");
    if (!Drupal.olivero.isDesktopNav()) {
      if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        headerInner.classList.add('site-header__shadow-active');
      } else {
        headerInner.classList.remove('site-header__shadow-active');
      }
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    expandMobileNav();
    ensureMobileNavFixed();
    toggleHeaderShadow();
  });

  window.addEventListener("scroll", toggleHeaderShadow);
  window.addEventListener('resize', function() {
    expandMobileNav();
    ensureMobileNavFixed();
    toggleHeaderShadow();
  });
})(Drupal, window, document);

style.css :

.is-fixed-mobile {
    position: sticky;
    top: 0;
    z-index: 102;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}

It's frustrating, it's impossible to automatically open the navigation bar menus on mobile. Can anyone review my script? THANKS

I have an Olivero subtheme with these files.

scripts.js

(function (Drupal, document, window) {
  // Ensures the navigation bar is fixed at the top on mobile devices, regardless of desktop navigation state.
  function fixedMobileNav() {
    function fixNav() {
      const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    }
    document.addEventListener('DOMContentLoaded', fixNav);
    window.addEventListener('resize', fixNav);
  }

  // Applies or removes a shadow from the header based on the scroll position, but only in mobile view.
  function shadowMobileNav() {
    function shadowNav() {
      const headerInner = document.getElementById("site-header__inner");
      if (!Drupal.olivero.isDesktopNav()) {
        if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
          headerInner.classList.add('site-header__shadow-active');
        } else {
          headerInner.classList.remove('site-header__shadow-active');
        }
      }
    }
    document.addEventListener('DOMContentLoaded', shadowNav);
    window.addEventListener('resize', shadowNav);
    window.addEventListener("scroll", shadowNav);
  }

  // This function is responsible for automatically expanding the navigation menu on mobile devices.
  function expandMobileNav() {
    function expandNav() {
      if (!Drupal.olivero.isDesktopNav()) {
        document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
          Drupal.olivero.toggleSubNav(menuItem, true);
        });
      }
    }
    document.addEventListener('DOMContentLoaded', expandNav);
    window.addEventListener('resize', expandNav);
  }

  // Initialize all the enhanced navigation functionalities.
  fixedMobileNav();
  shadowMobileNav();
  expandMobileNav();

})(Drupal, document, window);

style.css

.site-header {
    z-index: 111 !important;
    border-block-end: 0px !important;
}

.is-fixed-mobile {
    position: sticky !important;
    top: 0;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}

This script works but it needs improvement. Browsing on mobile and tablet is much better :

scripts.js

(function (Drupal, document, window) {
  // Ensures the navigation bar is fixed at the top on mobile devices, regardless of desktop navigation state.
  function fixedMobileNav() {
    const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
    const fixNav = () => {
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    };
    document.addEventListener('DOMContentLoaded', fixNav);
    window.addEventListener('resize', fixNav);
  }

  // Applies or removes a shadow from the header based on the scroll position, but only in mobile view.
  function shadowMobileNav() {
    const headerInner = document.getElementById("site-header__inner");
    const shadowNav = () => {
      if (!Drupal.olivero.isDesktopNav()) {
        if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
          headerInner.classList.add('site-header__shadow-active');
        } else {
          headerInner.classList.remove('site-header__shadow-active');
        }
      }
    };
    document.addEventListener('DOMContentLoaded', shadowNav);
    window.addEventListener('resize', shadowNav);
    window.addEventListener("scroll", shadowNav);
  }

  // Handles expanding the navigation menu on mobile and observing changes.
  function handleNavigationExpansion() {
    const navButton = document.querySelector('[data-drupal-selector="mobile-nav-button"]');
    const expandNav = () => {
      const expanded = navButton.getAttribute("aria-expanded") === "true";
      if (expanded && !Drupal.olivero.isDesktopNav()) {
        document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
          Drupal.olivero.toggleSubNav(menuItem, true);
        });
      }
    };
    // Observer for changes in navigation button state.
    const observer = new MutationObserver(() => expandNav());
    observer.observe(navButton, { attributes: true });
    // Resize event to adjust navigation state.
    window.addEventListener('resize', () => {
      setTimeout(expandNav, 100);
    });
  }

  // Initialize all the enhanced navigation functionalities.
  fixedMobileNav();
  shadowMobileNav();
  handleNavigationExpansion();

})(Drupal, document, window);

style.css

.site-header {
    z-index: 111 !important;
    border-block-end: 0px !important;
}

.is-fixed-mobile {
    position: sticky !important;
    top: 0;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}