[javascript] Navigation bar Java related issues

[cdwyersandysecondary]

Hi all.

 

I have created a dynamic floating ‘pill’ effect for my navigation bar with Jquery, whereby the nav bar pops out on scroll and is encapsulated by a pill-like shape.

 

It works fine at a base level, but I’m noticing that if you attempt to hover over the nav bar on a part that contains sub-menu’s, it will add a white space above the nav bar and duplicate the sub menu. It only happens if you try to use the nav bar whilst the page is still loading, if you leave it a few seconds for everything on the page to load, the issue doesn’t occur.

 

I have tried loading the code in the header and the footer, no change.

 

I have tried to hide the overflow of the nav bar and also tried adding hide overflow to the global css, I have tried adding code that notices if the sub menu is duplicated and deletes it Instantly, nothing works.

 

Short of disabling the nav bar for a few seconds after page load, I’m not sure what to do.

 

It doesn’t happen on mobile but if anyone is able to help and wants to test on pc:

 

http://samq8.sg-host.com

 

That’s the link to the site (it’s in development)

 

If anyone needs it, I can get the entire jquery to show you.

 

I’ve ensured there’s no conflicting css in the global (I think) and I’ve combined all my jquery into one incase having bits scattered was causing the issue, nothing has helped.

 

Thanks!

[lyness97]

Is this still something you are struggling with? If so with a little more detail I can help resolve your issue, and we can get this done via vanilla JS without the need for jQuery.

 

Also one quick observation from having a quick look. You are adding extra padding to the menu on hover which is pushing menu items away, if you have the padding there before the hover then the background colour will nicely fade in without the shift inwards.

 

Let me know if I can assist further

[cdwyersandysecondary]

Is this still something you are struggling with? If so with a little more detail I can help resolve your issue, and we can get this done via vanilla JS without the need for jQuery.

 

Also one quick observation from having a quick look. You are adding extra padding to the menu on hover which is pushing menu items away, if you have the padding there before the hover then the background colour will nicely fade in without the shift inwards.

 

Let me know if I can assist further

 

Hi there, yes it is. I added a spinner to delay the nav bar which has helped in the mean time, as it doesn't happen if you wait a second after the page loads. It's not ideal but sorted it for now.

 

Here is the code for my header:

 

 

With the padding, are you referring to the way it moves down on hover with the pill? I want to retain this if possible just for aesthetics!

 

Thanks so much.

[lyness97]

Okay I see what you mean, I did notice the loading spinner when looking at the site.

 

Would you mind if I was to rebuild the menu style and JS from scratch and fire you the code through to use? I have started putting it together this morning and will have time to finish it later on. Stripping out jQuery and writing this in vanilla JS is going to help a lot, making it lightweight and no longer dependant on the library. Once done I can fire you the code to drop in place and should work as needed. One last thing, are you wanting it to continue as on hover? Or would you like to see an on click to keep the sub menu active as well?

 

I'll update you once I have had chance to take a dive into it

[cdwyersandysecondary]

Okay I see what you mean, I did notice the loading spinner when looking at the site.

 

Would you mind if I was to rebuild the menu style and JS from scratch and fire you the code through to use? I have started putting it together this morning and will have time to finish it later on. Stripping out jQuery and writing this in vanilla JS is going to help a lot, making it lightweight and no longer dependant on the library. Once done I can fire you the code to drop in place and should work as needed. One last thing, are you wanting it to continue as on hover? Or would you like to see an on click to keep the sub menu active as well?

 

I'll update you once I have had chance to take a dive into it

 

That would be amazing, thanks so much! More than willing to give it a go!

 

If possible I would like to retain the look and functionality as is, I made a rod for my own back a little bit as my senior team love the way it looks! Lol.

 

Thanks a lot for your help.