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)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?