Jump to content
Ayodeji

Collapsible Nav Bar and Sticky Nav Bar not working together

Recommended Posts

I am working on a new website for my wife. I tried to make it mobile responsive by using the w3css collapsible navbar with its accompanying javascript and it was working fine. I later tried to make the navbar sticky to improve on the user experience. On introducing the sticky navbar with its accompanying javascript, it becomes sticky on both desktop and mobile but the menu button on mobile stopped working although it is displayed.

file.html

Share this post


Link to post
Share on other sites
On 7/7/2018 at 8:56 AM, Ayodeji said:

I am working on a new website for my wife. I tried to make it mobile responsive by using the w3css collapsible navbar with its accompanying javascript and it was working fine. I later tried to make the navbar sticky to improve on the user experience. On introducing the sticky navbar with its accompanying javascript, it becomes sticky on both desktop and mobile but the menu button on mobile stopped working although it is displayed.

file.html

It seems you've defined `myFunction()` twice. When you're trying to make the page sticky, you've overridden the function which makes the menu work.

I suggest changing the first `myFunction()` to a more descriptive name like `toggleMenu()` and change the menu button onclick method to also use toggleMenu.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×