Menu icon Foundation
Topbar ontop of div

Screen shot 2015 08 25 at 12.20.06 pm

I am using Foundation with Wordpress. However when I set up my topbar, the topbar goes on top of the image and hides, the logo.

I am using the Menu Walker Example from the Foundation Example.
http://foundation.zurb.com/forum/posts/438-enabling-foundation-5-nav-with-wordpress-menus

All My JS has been set up properly using the enqueue scripts Wordpress Function.

I have tried setting up the codepen below http://codepen.io/jgacuca567/pen/QbeVvj

My objective is to have the logo ontop of the topbar

My Wordpress Code

<div data-equalizer>
    <div class="large-7 medium-7 small-12 columns head-container" data-equalizer-watch>
        <div class="imagelogo">
          <?php if(get_header_image('custom-header')) : ?>
            <a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
              <img src="<?php header_image(); ?>">
            </a>
          <?php endif;?>
        </div>
        <h1 class="stories">Stories from the Field</h1>
    </div>
    <div class="large-5 medium-5 small-12 columns text-right small-only-text-left  head-container" data-equalizer-watch>
        <form>
            <div class="row collapse searchfield show-for-medium-up">
                <div class="small-9 columns">
                    <input type="text" placeholder="Search">
                </div>
                <div class="small-3 columns">
                    <a href="#" class="button postfix search"><i class="fa fa-search"></i></a>
                </div>
            </div>
        </form>
        <a href="https://www.facebook.com/NACCHOHQ" target="_blank"><i class="fa fa-facebook-square fa-3x show-for-medium-up"></i></a>
        <a href="https://twitter.com/NACCHOalerts" target="_blank"><i class="fa fa-twitter-square fa-3x show-for-medium-up"></i></a>
    </div>
  </div><!--End of Div Equalizer-->
<header class="row contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name">
            <!--Name Class removed temporarily-->
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
          <!--Insert PHP Display Menu Function-->
        </section>
    </nav><!--Second TopBar-->
  </header>
            

         

Screen shot 2015 08 26 at 3.15.15 pm

topbarwordpress

Screen shot 2015 08 25 at 12.20.06 pm

I am using Foundation with Wordpress. However when I set up my topbar, the topbar goes on top of the image and hides, the logo.

I am using the Menu Walker Example from the Foundation Example.
http://foundation.zurb.com/forum/posts/438-enabling-foundation-5-nav-with-wordpress-menus

All My JS has been set up properly using the enqueue scripts Wordpress Function.

I have tried setting up the codepen below http://codepen.io/jgacuca567/pen/QbeVvj

My objective is to have the logo ontop of the topbar

My Wordpress Code

<div data-equalizer>
    <div class="large-7 medium-7 small-12 columns head-container" data-equalizer-watch>
        <div class="imagelogo">
          <?php if(get_header_image('custom-header')) : ?>
            <a href="<?php echo esc_url(home_url('/')); ?>" rel="home">
              <img src="<?php header_image(); ?>">
            </a>
          <?php endif;?>
        </div>
        <h1 class="stories">Stories from the Field</h1>
    </div>
    <div class="large-5 medium-5 small-12 columns text-right small-only-text-left  head-container" data-equalizer-watch>
        <form>
            <div class="row collapse searchfield show-for-medium-up">
                <div class="small-9 columns">
                    <input type="text" placeholder="Search">
                </div>
                <div class="small-3 columns">
                    <a href="#" class="button postfix search"><i class="fa fa-search"></i></a>
                </div>
            </div>
        </form>
        <a href="https://www.facebook.com/NACCHOHQ" target="_blank"><i class="fa fa-facebook-square fa-3x show-for-medium-up"></i></a>
        <a href="https://twitter.com/NACCHOalerts" target="_blank"><i class="fa fa-twitter-square fa-3x show-for-medium-up"></i></a>
    </div>
  </div><!--End of Div Equalizer-->
<header class="row contain-to-grid">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name">
            <!--Name Class removed temporarily-->
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
          <!--Insert PHP Display Menu Function-->
        </section>
    </nav><!--Second TopBar-->
  </header>
            

         

Screen shot 2015 08 26 at 3.15.15 pm
Rafi Benkual about 4 years ago

What are you using equalizer for?

Also, the top-bar is the component below the logo, it looks ok in your image. What are you trying to get it to look like?

James Van Waza about 4 years ago

@Rafi Benkual I am using equalizer because when I insert the form, the margins are not displaying properly event though I change them again.

I would like the image to be at the top instead of the topbar, so that when the logo is displayed first then the topbar.

See Image 2nd Image Above.

Rafi Benkual about 4 years ago

Looks like you're missing the .row class that wraps the columns. When I add it, things seem to be better - http://codepen.io/rafibomb/pen/bVbdmo?editors=110

James Van Waza about 4 years ago

@Rafi Benkual I redid some work on Codepen, eventually this is how I would like it to look like. I removed the equalizer classes and I am using margins.

Also, a good example is how The Zurb Website, has set up the Wired 2015 at the top.

See Link Below - http://codepen.io/jgacuca567/pen/ojvBPW

Do you know, whether it will conflict with the Wordpress Topbar or ?

Rafi Benkual about 4 years ago

Looks much better!

There is no reason this would mess with the WP setup.