Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

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
  • #3383

    I use smartmenus for my web site at 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.


    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.