responsive-nav.js
responsive-nav.js copied to clipboard
arielsalminen
Mobile menu is always expanded and won't collapse to the menu button
I'm trying to implement this menu on my website and was successfully able to get it to work on my local machine. If I re-size the browser to make it narrow the menu collapses to the mobile menu button with the 3 lines as expected. Clicking the button then shows the mobile menu.
For some reason though when I uploaded all my files to my web server now when you have a narrow screen size it switches from my horizontal menus to the mobile menus, but never collapses it to the menu button. So now the menu is always in its expanded state and there is no X button to collapse it like I saw when testing the files locally. This problem has happens when viewing the site both on a desktop and my iphone 6.
I keep thinking that I forgot to upload some file or that it's not finding the path to some file, but I'm not seeing my mistake. Here my the files and paths that I uploaded:
mysite.org/sandbox/Index.htm mysite.org/sandbox/CSS/nav-styles.css (I use this for additional styling of the menus) mysite.org/sandbox/CSS/responsive-nav.css mysite.org/sandbox/js/Gruntfile.js mysite.org/sandbox/js/responsive-nav.js mysite.org/sandbox/js/responsive-nav.min.js
This is what I have inside the index.htm file I'm trying to view:
`
`Before the closing body tag I have this:
<script> var navigation = responsiveNav(".nav-collapse", { animate: true, // Boolean: Use CSS3 transitions, true or false transition: 284, // Integer: Speed of the transition, in milliseconds label: "Menu", // String: Label for the navigation toggle insert: "after", // String: Insert the toggle before or after the navigation customToggle: "", // Selector: Specify the ID of a custom toggle closeOnNavClick: false, // Boolean: Close the navigation when one of the links are clicked openPos: "relative", // String: Position of the opened nav, relative or static navClass: "nav-collapse", // String: Default CSS class. If changed, you need to edit the CSS too! navActiveClass: "js-nav-active", // String: Class that is added to <html> element when nav is active jsClass: "js", // String: 'JS enabled' class which is added to <html> element init: function(){}, // Function: Init callback open: function(){}, // Function: Open callback close: function(){} // Function: Close callback }); </script>
Can anyone tell me what I've done wrong?
@sawalker The problem here, I think, might be that all the ResponsiveNav settings (except the first) and the closing </script> tag is commented out.
Try changing that and see if it fixes this.
If it doesn’t, I might have to see a live example to be able to help you.
I think the word wrapping makes it look like the parameters are commented out when in fact they are not. Nevertheless, I removed all comments and that did not resolve the problem. Here is a URL to the site: http://www.prayerchaininternational.org/Sandbox/Index-mobile.htm
If needed is there a way I can send you the actual css files that are related to the menu?