How can I move the sticky bar to the top in my theme?

Store Design
, , , ,
1

hello guys I have a problem, I want to edit the sticky bar that is stored at the bottom so it is at the top. because when you open the website on your cellphone, the menu is at the bottom so it is covered with the WA icon. how to move the sticky bar to the top?

WhatsApp Image 2024-03-06 at 15.10.32.jpeg
WhatsApp Image 2024-03-06 at 15.10.32.jpeg739×1600 112 KB

2

Hi @megawdyaaaa ,

Do you want the menu to be on the top of the page like this?

SandeepPangeni_0-1709713846198.png
SandeepPangeni_0-1709713846198.png548×865 377 KB

Then add the below css to your css file.

@media only screen and (max-width: 767px) {
   .js-animate .site-nav__thumb-menu {
       top:0;
   }
}
3

yessss right, where do I put the coding? and in which file?

4

Hi @megawdyaaaa

Go to the theme.css file and add the below css.

@media only screen and (max-width: 767px) {
   body .js-animate .site-nav__thumb-menu {
       top:0;
   }
}

Thank you

5

yes, I succeeded, thanks for the help. can you make the menu go all the way down and the box isn’t that long?

6

but wait, when I move to the top of the menu it can’t be clicked, why?

7

Hi @megawdyaaaa ,

Try adding below css instead.

@media only screen and (max-width: 767px) {
   body .js-animate .site-nav__thumb-menu {
       top:0;
       z-index: 9;
   }
.slide-nav__overflow--thumb.js-menu--is-open {
    bottom: 0px;
}

}
8

oke i try adding the coding