Main bar menu "above" the sliding navigation menu on the mobile version

Solved
Highlighted
Tourist
5 0 1

Hello !

I have an issue on the mobile version on my website and I didn't find the same issue on the forum so i'm posting a new message.

It seems that on the mobile version, the main bar menu and the announcement bar are "above" the sliding navigation menu. Im using the Debut Theme. 

When the announcement bar is activated, the first element of my sliding navigation menu is ''missing", there are only few pixels between the main menu bar and the second element of the sliding menu to click on the first element. (Picture 1)  

When the announcement bar is not activated, the first element of the sliding menu fully appears. (Picture 2)

FYI, I have modified the code to make the main bar menu appears when the page is scrolled, maybe it's the source of the issue. 

My site is hubcbd.fr code hubhubhub.

Thank you !

Sans titre.png

0 Likes
Highlighted

I wasn't able to replicate the issue, I'm assuming you got it fixed by now.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
Highlighted
Tourist
5 0 1

Hello Diego,

I activated the announcement bar again, so you can experience the issue. 

Thank you for your help.

0 Likes
Highlighted

This is an accepted solution.

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
    style + .announcement-bar + header > nav{
    margin-top: 42.8px;
}
}


Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted

In addition to that I noticed a few other issues:

1. With the sticky announcement a part of your text is being cut off:

diego_ezfy_0-1604604920458.png


2. When you close the menu it scrolls all the way to the top (not a very pleasant experience)

diego_ezfy_1-1604604957293.png



There is some room for improvement in your website. If it's of your interest you can email me so we can talk about these.

Wishing you the best,


Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes
Highlighted
Tourist
5 0 1

Thank you for the answer, it works perfectly.

I know i still have issues with the contents because it's not finished yet but i will think about your offers,

Regards 

0 Likes