Sticky Header Problem on Mobile

[guguk]

Hello guys,
Im working a project and im using Business Lounge Theme. ( https://babia.to/threads/business-lounge-multi-purpose-business-consulting-theme.1179/#post-260405 )

Normally there have an option on-off for sticky in theme options panel but its effect just desktop not for mobile. I have read comments themeforest's sales page and someone asked before and author said that: "There are compatibility problems on sticky items with mobile browsers. Also, there is not enough room on the top of the screen. it could" but my clients wants that.
So i just tried only CSS but it's not enough. When i sticky header in homepage header covering on slider and also mobile menu not display as always. So i need Javascript tricks but i have no idea how to do.

Can someone help me?
Thnx

 

[videva]

Hello guys,
Im working a project and im using Business Lounge Theme. ( https://babia.to/threads/business-lounge-multi-purpose-business-consulting-theme.1179/#post-260405 )

Normally there have an option on-off for sticky in theme options panel but its effect just desktop not for mobile. I have read comments themeforest's sales page and someone asked before and author said that: "There are compatibility problems on sticky items with mobile browsers. Also, there is not enough room on the top of the screen. it could" but my clients wants that.
So i just tried only CSS but it's not enough. When i sticky header in homepage header covering on slider and also mobile menu not display as always. So i need Javascript tricks but i have no idea how to do.

Can someone help me?
Thnx

you want to enable sticky menu header on mobile ? like this ?



*when clicked



*you can still scroll down the menu


if you want to create sticky menu like that, see code below
1. insert this css code to header.php or footer.php or wherever you want

.sticky-mobile {
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: inherit;
}

.sticky-mobile-navigation {
    position: fixed;
    overflow: auto;
    height: 100%;
    width: 100%;
}

2. put this javascript to footer.php

<script>
let navbar = document.querySelector(".mobile-header-holder");
let mobnav = document.querySelector("ul#mobile-navigation");

if (navbar && mobnav) {

  function stickymobile() {
    let topoffset = navbar.offsetTop;

    if (window.pageYOffset > topoffset) {
      navbar.classList.add("sticky-mobile");
      mobnav.classList.add("sticky-mobile-navigation");
      mobnav.style.top = navbar.offsetHeight + 'px';

    } else {
      navbar.classList.remove("sticky-mobile");
      mobnav.classList.remove("sticky-mobile-navigation");
      mobnav.removeAttribute("style");
    }
  }
  document.addEventListener('scroll', () => {
    stickymobile();
  });
  document.addEventListener('touchmove', () => {
    stickymobile();
  });
}
</script>

i tested using Business Lounge Theme from babiato

 

[guguk]

Thank you so much i really appreciated at least reply i need just that javascript code i will try and notify, thanks a lot

 

[guguk]

It worked like a charm! Thank you so much again.