How to add floating header navigation bar for mobile

pearlyluxe
Visitor
1 0 0

Hello,

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

pearlyluxe_0-1714047512713.png

pearlyluxe_1-1714047541143.png

 

 


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

I managed to add a button

pearlyluxe_2-1714047577084.png


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

Please can someone help

Replies 2 (2)

zack_dev
Shopify Partner
75 14 10
<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.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

zack_dev
Shopify Partner
75 14 10
<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.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me