Change default align for toggle menu button and add MENU text

[netfocus]

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!

[admin]

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!

[Rover]

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!

[admin]

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.

[Author]

Posts