Skip to Content
Home › Forums › Older releases › 1.0.x › Adding a mobile view menu toggle button
I use smartmenus for my web site at http://www.vintagewatchstraps.com and it works great, it allowed me to make my site mobile friendly so I am really grateful to Vasil for making this available.
I would like to add a mobile view menu toggle button (hamburger/x icon) but I am having difficulty, I don’t understand what HTML code to include. I only use a simple text editor to build this site.
I have updated the css and js to the latest version, but if when I add the code
<!– Mobile menu toggle button (hamburger/x icon) –>
<input id=”main-menu-state” type=”checkbox” />
<label class=”main-menu-btn” for=”main-menu-state”>
<span class=”main-menu-btn-icon”></span> Toggle main menu visibility
to my <nav> section, all that happens is that I get a little checkbox above the menubar with the text “Toggle main menu visibility” next to it.
I have looked at the JSFiddle example but that didn’t help me. Any suggestions would be gratefully received.
Hi, I saw you have added the JS code but it looks like you haven’t added the CSS. Just copy it from here:
and make sure it’s added on your page in some way. Then you can add the HTML before your root UL element and it should work.
Ahh, I didn’t realise that the CSS had to be added as an extra. I did it and it is working perfectly now, thanks!
Just one more thing if you don’t mind, how do I style it to look like your first example “Complete navbar .sm-blue” where the hamburger/x icon background and foreground colours remain the same?
Thank you so much!
You mean something like this?
Replace the CSS you just added with the one from the above JSFiddle demo (just omit the last few rules after the comment /* IGNORE: Unrelated generic demo styles */) and also set the “main-nav” class to your <nav> element.
/* IGNORE: Unrelated generic demo styles */
Yes, exactly that. I did what you said and now it works perfectly!
I have a couple more things I would like help with but because you have already helped me so much I am going to take out a Premium Support, I think that’s only fair.
You will be emailed a link to set your password.
Username or Email Address
You will receive emails only on new version releases or really important news. Your email will not be shared with anyone. We hate spam too!