Menu icon Foundation
How do you increase the clickable area for off-canvas icon?

I’ve been racking my brain about this for 2 hours now. I’ve inspected all the elements and changed all possible properties, but I cannot expand the clickable area for the menu icon.

Here is an image of what I mean. http://i.imgur.com/b9xp8Ll.png

I’m using the off canvas menu with a sticky top bar as outlined by David Govea in this post:
http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar?page=2

Changing any property of left-off-canvas-toggle menu-icon, or left-off-canvas-toggle menu-icon span does absolutely nothing to increase the clickable area. I can change backgrounds, font colors, padding, margin, but nothing affects the actual area that can be clicked on.

Am I missing something simple or do I need to look somewhere else for code to change?

Thanks!

F5 problem

<!-- off-Canvas Menu --> 
<div class="fixed off-canvas-fixed">
	<nav class="tab-bar">
	  <section class="left-small">
	    <a class="left-off-canvas-toggle menu-icon"><span>MENU</span></a>
	  </section>

	  <section id="branding" class="right tab-bar-section">
		<h1>my site</h1>
	  </section>

	  <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

	</nav>

	<aside class="left-off-canvas-menu">
		<ul class="off-canvas-list">
			<li><label>Useful Menu</label></li>
			<li><a href="#">As a mobile device user,</a></li>
			<li><a href="#">etc, etc, etc</a></li>
			<li><label>More Menu</label></li>
			<li><a href="#">As a mobile device user,</a></li>
			<li><a href="#">etc, etc, etc</a></li>
		</ul>
	</aside>

	<a class="exit-off-canvas"></a>
</div>

off-canvasstickytop barmenu-icon

I’ve been racking my brain about this for 2 hours now. I’ve inspected all the elements and changed all possible properties, but I cannot expand the clickable area for the menu icon.

Here is an image of what I mean. http://i.imgur.com/b9xp8Ll.png

I’m using the off canvas menu with a sticky top bar as outlined by David Govea in this post:
http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar?page=2

Changing any property of left-off-canvas-toggle menu-icon, or left-off-canvas-toggle menu-icon span does absolutely nothing to increase the clickable area. I can change backgrounds, font colors, padding, margin, but nothing affects the actual area that can be clicked on.

Am I missing something simple or do I need to look somewhere else for code to change?

Thanks!

F5 problem

<!-- off-Canvas Menu --> 
<div class="fixed off-canvas-fixed">
	<nav class="tab-bar">
	  <section class="left-small">
	    <a class="left-off-canvas-toggle menu-icon"><span>MENU</span></a>
	  </section>

	  <section id="branding" class="right tab-bar-section">
		<h1>my site</h1>
	  </section>

	  <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

	</nav>

	<aside class="left-off-canvas-menu">
		<ul class="off-canvas-list">
			<li><label>Useful Menu</label></li>
			<li><a href="#">As a mobile device user,</a></li>
			<li><a href="#">etc, etc, etc</a></li>
			<li><label>More Menu</label></li>
			<li><a href="#">As a mobile device user,</a></li>
			<li><a href="#">etc, etc, etc</a></li>
		</ul>
	</aside>

	<a class="exit-off-canvas"></a>
</div>
Jason Demitri over 5 years ago

Try this ive only done it as a button but should work

http://codepen.io/relutionDesigns/pen/gDprz

Michal Molčan about 5 years ago

Try add

style="padding-left:45px;"

to your #branding element. It overlaps your off-canvas-toggle.

It should look like this:

<section class="left-small">
      <a class="left-off-canvas-toggle menu-icon"><span></span>MENU</a>
    </section>

    <section id="branding" class="right tab-bar-section" style="padding-left:45px;"
 >
    <h1>my site</h1>
    </section>