• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

Sticky Header Problem on Mobile

guguk

Well-known member
Trusted Seller
Trusted Uploader
Jul 19, 2019
1,589
1,277
113
Ottoman Empire
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
 
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 ?
1.png


*when clicked
2.png


*you can still scroll down the menu
3.png

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
CSS:
.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
JavaScript:
<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
 
  • Love
Reactions: 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
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock