Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Commit

Permalink
Fix Mobile Menu Button AKA Hamburger
Browse files Browse the repository at this point in the history 
The mobile menu button broke in FoundationPress when using Foundation 6.3.1. The problem is the 'title-bar' needs to have the 'data-responsive-toggle' set to the same ID as the button 'data-toggle' value.
  • Loading branch information
@EricRihlmann
EricRihlmann committed Mar 14, 2017
1 parent b823dbd commit 7fa7962
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<?php do_action( 'foundationpress_layout_start' ); ?>

<header id="masthead" class="site-header" role="banner">
<div class="title-bar" data-responsive-toggle="site-navigation">
<div class="title-bar" data-responsive-toggle="mobile-menu">
<button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
<div class="title-bar-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
Expand Down

2 comments on commit 7fa7962

@Devin-Chicras
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

THANK YOU so much for this. Just spent three hours trying to troubleshoot why the hamburger menu wouldn't tap open in mobile (or on a Chromebook browser scaled down, funny enough, the Chrome on my Mac worked just fine).

@get2web
Copy link

@get2web get2web commented on 7fa7962 May 10, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made this change but hamburger still won't work for me - https://bit.ly/2rzahXQ

Copy of header.php

`<?php
/**

  • The template for displaying the header
  • Displays all of the head element and everything up until the "container" div.
  • @Package FoundationPress
  • @SInCE FoundationPress 1.0.0
    */

?>
<!doctype html>

>
New Parenting Sexuality E-Course >> 
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7023754/7163752/css/fonts.css" />

<script src="https://use.typekit.net/tbp1gmj.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>

<?php wp_head(); ?>

</head>
<body <?php body_class(); ?>>
<?php do_action( 'foundationpress_after_body' ); ?>

<?php if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) : ?>
<div class="off-canvas-wrapper">
	<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	<?php get_template_part( 'template-parts/mobile-off-canvas' ); ?>
<?php endif; ?>

<?php do_action( 'foundationpress_layout_start' ); ?>
		
<header id="masthead" class="site-header" role="banner">
	<div class="title-bar" data-responsive-toggle="mobile-menu">
		<button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
		<div class="title-bar-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
		</div>
	</div>

<div class="side-nav" style="overflow-y: scroll!important;">
  <a class="icomoon side-nav-close">×</a> 
  <ul>
   
	<li class="uppercase">Resources</li>
	<li><a href="/?Type=blog-posts">Blog</a></li>
    <li><a href="http://courses.moralrevolution.com/">Online Courses</a>
    <li><a href="https://shop.moralrevolution.com/collections/books">Books</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Videos'))); ?>">Videos</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Podcasts'))); ?>">Podcasts</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Recommended Resources'))); ?>">Recommended Resources</a>
	  <li><a href="/singles">Singles</a></li>
	  <li><a href="/parenting">Parenting</a></li>
	  <li></li>
	  
	<li class="uppercase">Store</li>
    <li><a href="https://shop.moralrevolution.com/collections/books">Books</a>
    <li><a href="https://shop.moralrevolution.com/collections/teaching">Teachings</a>
	<li><a href="http://courses.moralrevolution.com/">Online Courses</a>
	<li><a href="https://shop.moralrevolution.com/collections/apparel">Apparel</a>
		  
	  <li class="uppercase">Events</li>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Events'))); ?>">Events</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Host Event'))); ?>">Host an Event</a>
	 
	  
	<li class="uppercase">About</li>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('About'))); ?>">Who We Are</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Team'))); ?>">Meet The Team</a>
    <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Contact'))); ?>">Contact</a>
	
	  <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('Donate'))); ?>#donation" class="button">Donate</a></li>
  </ul>
</div>



	<nav id="site-navigation" class="main-navigation top-bar light-top-bar" role="navigation">
  <div class="row">
		<div class="top-bar-left">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="http://moralrevolution.com/wp-content/uploads/2017/05/MR-Logo-Wide-Cropped-Small.png"></a>
		</div>
    <div class="medium-12 columns text-aligncenter show-for-large">
      <?php foundationpress_top_bar_r(); ?>

      <!-- <?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) == 'topbar' ) : ?>
        <?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
      <?php endif; ?> -->
    </div>
    
    <div class="top-bar-right text-align-right">
      <a class="donate hide-for-small-only" href="<?php echo esc_url(get_permalink(get_page_by_title('Donate'))); ?>#donation">Donate</a>
                <a class="fa fa-search venobox_search" data-vbtype="inline" href="#search"></a>
      <div id="search">
                    
        <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
          <?php do_action( 'foundationpress_searchform_top' ); ?>
          <div class="input-group">
            <input type="text" class="input-group-field" value="" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'foundationpress' ); ?>">
            <?php do_action( 'foundationpress_searchform_before_search_button' ); ?>
            <div class="input-group-button">
              <input type="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'foundationpress' ); ?>" class="button">
            </div>
          </div>
          <?php do_action( 'foundationpress_searchform_after_search_button' ); ?>
        </form>

      </div>
      <a class="icomoon side-nav-open">¦</a>
    </div>
  </div>

	</nav>



	</div>
			
		<!--Adds Captcha To Contact Forms-->
		<script src='https://www.google.com/recaptcha/api.js'></script>
</header>

<section class="container">
	<?php do_action( 'foundationpress_after_header' );`

Please sign in to comment.