Jump to content

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

Link to post
Share on other sites
  • 1 month later...
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...