How to get floating buttons to appear behind the Navigation Menu

MerrittWatson
Excursionist
21 0 3

I have 2 x floating buttons on my Shopify store. One is a newsletter signup which is put there by Klaviyo. The other is connected to my rewards program Smile.io. These work perfectly except for when you open the navigation menu on a mobile. These buttons sit over t

he top of the menu and cover some important parts of the navigation menu.

 

Any idea on how I can have the menu appear over top of these buttons, or worst case hide these buttons when the menu draw is activated?

Reference: www.piknmix.co.nz

Thanks!
Merritt

 

Screenshot 2023-09-12 at 09.13.52.png

Replies 6 (6)

Taknify
Shopify Partner
129 10 17

Hi, there are mutiple ways to get this done. You can either use z-index or have a javascript logic which when the mobile navigation button is clicked will hide those buttons and if not shown then show them back. 
You icons are showing when mobile menu is open is most likely due to z-index of those icons being higher. 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
MerrittWatson
Excursionist
21 0 3

Thanks Taknify,

I thought it would be something along those lines. Could I simply go and adjust the position of that code in the theme files or would it be something a bit trickier?

Taknify
Shopify Partner
129 10 17

I would definitely recommend you to try it our yourself. Who knows you will learn other things when conquering this issue. 
If you happen to be stuck even after you try (don't worry, it happens to each of us), feel free to reply back or ask for more help. 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
MerrittWatson
Excursionist
21 0 3

Any idea where to start? I can usually figure it out myself, I just never know which file I need to look in 😂

Taknify
Shopify Partner
129 10 17

You can start with debugging it like this. 
Here is a general sense:
You should create a function around class icon-state__primary and icon-state__secondary or 
Create a function to hide those two floating buttons or
Add z-index to the mobile menu or make it a lower 
value for the floating buttons. 
Screenshot 2023-09-11 at 10.22.13 PM.png

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

NguyenVu
Tourist
9 0 3

I have found a free app on Shopify's public app store called Pronavi: https://apps.shopify.com/pronavi-navigation-design , which allows you to easily add and customize the bottom bar of your website. 

 

Frame 197.png

 

Slide-0.png