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.

Change default align for toggle menu button and add MENU text

Home Forums Older releases 1.0.x Change default align for toggle menu button and add MENU text

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3008
    netfocus
    Participant

    I would like to change the alignment for the toggle menu button from left to right and add the MENU text on the left side. How can I do that? Best regards!

    #3010
    admin
    Keymaster

    Assuming you are using the sample code from here:

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

    for example, you could achieve it by making the following changes:

    HTML:

    <!-- 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>
    
    <h3 class="main-menu-heading">MENU</h3>
    
    <!-- Sample menu definition -->
    <ul id="main-menu" class="sm sm-blue"> ...

    CSS:

    #main-menu {
      clear: both;
    }
    .main-menu-heading {
      /* style the MENU text as you like here */
    }
    @media (min-width: 768px) {
      .main-menu-heading {
        display: none;
      }
    }
    .main-menu-btn {
      float: right;
      /* ... the declarations from the Docs */
    }
    /*... the rest of the rules from the Docs */

    Hope it’s clear enough. Cheers!

    #3307
    Rover
    Participant

    Hi there and thanks for this great recipe!

    I do have one question…. if we follow this recipe, we can click on the hamburger to reveal the menu. That works great 🙂

    BUT, if we click on let’s say the text MENU, this does not reveal the menu. Is there anyway we can do it so that if you click on our text MENU ( or the Hamburger ), the menu opens?

    Many thanks sir!

    #3371
    admin
    Keymaster

    Hey Rover, try this, it should work:

    $(function() {
    	$('.main-menu-heading').click(function() {
    		$('#main-menu-state').click();
    	});
    });

    It will trigger a click on the hamburger button each time the .main-menu-heading is clicked.

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