Menu icon Foundation
Top Bar sub menus on 'small'

I am having problems with the sub-menu's on 'small' screens.
As you will see in the screenshot, the sub menu items are covering the other menu items, and not showing to the side as they should.
I am sure I have missed a line of code somewhere, but I cannot figure out where or what I have missed.

Cheers guys.

Screen shot 2014 04 16 at 11.38.34

Header - right menu section

    <div id="main-menu">
		<div class="row">
			<div class="contain-to-grid sticky">
				<nav id="site-navigation" class="top-bar" data-topbar sticky role="navigation">
					<ul class="title-area">
						<li class="name">
							<h4><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h4>
						</li>
						<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
					</ul>	
					<section class="top-bar-section">
						<!-- Right Nav Section -->
						<ul class="right">
							<nav id="site-navigation" class="main-navigation" role="navigation">
								<h3 class="menu-toggle"><?php _e( '', 'sataxi' ); ?></h3>
								<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
							</nav><!-- #site-navigation -->
						</ul>
					</section>
				</nav><!-- #site-navigation -->
			</div>
		</div> <!-- row -->		
	</div><!-- main menu -->
            

         

Functions.php enqueue calls


/**
 * Enqueue scripts and styles.
 */
function sataxi_scripts() {
    wp_enqueue_style( 'sataxi-style', get_stylesheet_uri() );
	
	/* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '5', true );

	/* Add Custom CSS */
	wp_enqueue_style( 'sataxi-custom-style', get_stylesheet_directory_uri() . '/custom.css', '', '2' );
	wp_enqueue_script( 'sataxi-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'sataxi-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'sataxi_scripts' );

         

top-barsub-menuoverlap

I am having problems with the sub-menu's on 'small' screens.
As you will see in the screenshot, the sub menu items are covering the other menu items, and not showing to the side as they should.
I am sure I have missed a line of code somewhere, but I cannot figure out where or what I have missed.

Cheers guys.

Screen shot 2014 04 16 at 11.38.34

Header - right menu section

    <div id="main-menu">
		<div class="row">
			<div class="contain-to-grid sticky">
				<nav id="site-navigation" class="top-bar" data-topbar sticky role="navigation">
					<ul class="title-area">
						<li class="name">
							<h4><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h4>
						</li>
						<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
					</ul>	
					<section class="top-bar-section">
						<!-- Right Nav Section -->
						<ul class="right">
							<nav id="site-navigation" class="main-navigation" role="navigation">
								<h3 class="menu-toggle"><?php _e( '', 'sataxi' ); ?></h3>
								<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
							</nav><!-- #site-navigation -->
						</ul>
					</section>
				</nav><!-- #site-navigation -->
			</div>
		</div> <!-- row -->		
	</div><!-- main menu -->
            

         

Functions.php enqueue calls


/**
 * Enqueue scripts and styles.
 */
function sataxi_scripts() {
    wp_enqueue_style( 'sataxi-style', get_stylesheet_uri() );
	
	/* Add Foundation CSS */
	wp_enqueue_style( 'foundation-normalize', get_stylesheet_directory_uri() . '/foundation/css/normalize.css' );
	wp_enqueue_style( 'foundation', get_stylesheet_directory_uri() . '/foundation/css/foundation.css' );
	wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '5', true );

	/* Add Custom CSS */
	wp_enqueue_style( 'sataxi-custom-style', get_stylesheet_directory_uri() . '/custom.css', '', '2' );
	wp_enqueue_script( 'sataxi-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'sataxi-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'sataxi_scripts' );

         
Stephen Voisey about 5 years ago

Hi Mark, it would be easier to see what is going on if you could drop your code into codepen, and I've had better feedback on these forums when I've done so. You can include Foundation CSS and Foundation JS like so:

http://blog.codepen.io/2013/07/31/bootstrap-and-foundation-added-to-external-css-resource-typeahead/

Also you really like large tabs! :)

Mark Smallman about 5 years ago

Resolved by 'Walker' in functions.php