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

    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!


    Assuming you are using the sample code from here:

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


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


    #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!


    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!


    Hey Rover, try this, it should work:

    $(function() {
    	$('.main-menu-heading').click(function() {

    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.


You will be emailed a link to set your password.


Lost password?