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
  • #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)
  • The forum ‘1.0.x’ is closed to new topics and replies.