How to add floating header navigation bar for mobile

[pearlyluxe]

Hello,

I am trying to add a floating navigation bar for mobile like in the photo i attached below.

This is my site: https://pearlyluxe.com/

I managed to add a button

But i don't know how to make it load my menu when you click it.

Please can someone help

[zack_dev]

<script>
var button = document.getElementById("sticky-btn");
button.addEventListener("click",function(e){
  click_event = new CustomEvent('click');
    btn_element = document.querySelector('.header__icon--menu');
     btn_element2 = document.querySelector('.menu-drawer__inner-container');
    //btn_element.setAttribute('open','open');
btn_element.dispatchEvent(click_event);
    btn_element2.dispatchEvent(click_event);
    document.getElementById("Details-menu-drawer-container").open = true;

},false);
<script>

hi you can place this code in theme.liquid at bottom . It will make you sidebar menu open .

If you need a floating menu then you will need to customize code and put menu again that will will opened using button.

[zack_dev]

<script>
(function() {
var button = document.getElementById("sticky-btn");
button.addEventListener("click",function(e){
  click_event = new CustomEvent('click');
    btn_element = document.querySelector('.header__icon--menu');
     btn_element2 = document.querySelector('.menu-drawer__inner-container');
    //btn_element.setAttribute('open','open');
btn_element.dispatchEvent(click_event);
    btn_element2.dispatchEvent(click_event);
    document.getElementById("Details-menu-drawer-container").open = true;

},false);
})();
</script>

try with this.