Brooklyn Theme Navigation not changing on screen resize

Highlighted
Excursionist
12 0 6

Hello!

I'm experiencing an odd issue with my navigation.

The site is called www.faithmasks.com

I did not see any issue with the navigation until the business owner said the navigation was missing when viewing on a 15" MacBook pro. He sent me a screen shot and for whatever reason, it was showing as the hamburger menu on his MacBook.

After investigating, I realized that the navigation is not changing on screen re-size. When viewing the website in developer mode, and the screen size is greater than 780px wide, the nav appears correct. When I resize to something more narrow, the nav menu changes to hamburger menu as it should. However, when I increase the screen width back to something around a normal desktop/laptop, the hamburger menu remains. No amount of re-sizing changes it.

I checked other sites using Brooklyn theme and their nav functionality worked correctly.

I removed the custom CSS temporarily to see if that was causing an issue but the problem persisted. 

I reduced the font-size of the menu items as I thought that would also be playing a part, but reducing the size, and even removing some items from the menu did not fix the problem. 

I would appreciate any help troubleshooting this!

Thank you!

Pete

0 Likes
Highlighted
Tourist
3 0 2

 I got the same problem.... see if anyone could help.

 

1 Like
Highlighted

Hello @peterchic , 

I have tried to debug the issue for you. And I am able to track down the issue. The issue is in the theme itself. The same issue is happening at the demo of the Brooklyn theme too. Here is the URL where you can test the demo theme: https://brooklyn-theme-classic.myshopify.com/

 

Now I have checked it. The hamburger is appearing at a width of 1020px whereas, on your website, the hamburger is appearing at a width of 948px.

At this point where the hamburger appears, the theme developer is using a class "site-nav--compress", that appears through JS and the desktop navigation disappears and mobile navigation appears. But when you resize the screen and increase the width by 1020px and 948px in the demo version and your website respectively this class should disappear. But it's not removing the class at that width. So the issue is with the theme itself. You should hire some professional developer to look into the issue or contact the theme developers for the same. I hope that answers your query.  


1 Like
Highlighted
Excursionist
12 0 6

Hey! Thanks for checking this out.

I can't believe I didn't check that demo site. I will message the theme developer about this. 

I'll be sure to update this post when I hear back from them.

-Pete

 

1 Like
Highlighted
Tourist
3 0 2

Hey Peter, Hope you are doing well. Not sure if you fixed the problem but I found a workaround for that.

The root cause of this problem is on the theme.js fitNav function. There is a condition of "if (navItemWidth > navWidth)" to determine whether the menu should collapse.

However, once the navitemwidth collapse, the width suddenly reduce a lot that causing the "else" function never be executed. 

 

I am not knowledgable to fix it but I try to replace the condition to "if ($(window).width() < 1300)", 1300 is your min width that could show all the nav item. Then it should work fine. However, it's kind of hardcode. If you change the nav item no. or having the translation, it may be ruined up. 

 

1 Like
Highlighted
Excursionist
12 0 6

Hey, I'm going to look more into this as soon as I can. I have discovered that if I remove one of the nav links - essentially making the entire nav width more narrow, the problem is one. I can re-size without any issue. So there is definitely some functionality that is not working because of the overall width of the nav links. 

I added some console.logs to the code and both the if and else statements fire. I need to dive deeper into this...

 

0 Likes