Adding a mobile view menu toggle button

[David.Cheshire]

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
</label>

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.

[admin]

Hi, I saw you have added the JS code but it looks like you haven’t added the CSS. Just copy it from here:

http://www.smartmenus.org/docs/#menu-toggle-button

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.

[David.Cheshire]

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!

[admin]

You mean something like this?

http://jsfiddle.net/vadikom/a3ra27kq/

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.

[David.Cheshire]

Yes, exactly that. I did what you said and now it works perfectly!

Thanks!!

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.

[Author]

Posts