Adding a mobile view menu toggle button

Home Forums Older releases 1.0.x Adding a mobile view menu toggle button

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3383
    David.Cheshire
    Participant

    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.

    #3388
    admin
    Keymaster

    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.

    #3389
    David.Cheshire
    Participant

    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!

    #3390
    admin
    Keymaster

    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.

    #3391
    David.Cheshire
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?