Menu icon Foundation
Remove & Relocate Logo Above Topbar

Hi Gang,
Thanks in advance for any help you provide. I recently read the 'De-coding Top Bar Customizations' post from Rafi which is sent out via newsletter on Zurb's University Lessons. It was super helpful as I spend more time messing with Topbar than any other aspect of Foundation. The post didn't cover something which I do alot though.. Removing the logo from topbar and placing it above topbar.

This is fairly simple to do, yet I'm still having problems in how the app generated CSS affects my markup.

I've removed the logo HTML markup and placed it in it's own wrapper above the `` If I leave the header class 'contain-to-grid' in the header app.css generates the background color of my topbar to be the area above it where my logo is as well. Fig. 1. Yet when I remove 'contain-to-grid' from the header class, the logo area above topbar looks great, but topbar then loses it's 'contain-to-grid' rule and floats to screen left. (Fig2)

I am uncertain how to rectify this as overwriting app.css is not really possible.

My Header markup is included below as well. Any guidance would be super appreciated.

<header> // Crucial class="contain-to-grid" pending
  <!-- Logo & Ad space -->
  <div class="headertopWrap">
    <div class="name">
      <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    </div>
    <div class="header-adspace">
      // Ads go here
    </div>
  </div><!-- .headertopWrap -->

  <!-- Starting the Top-Bar -->
  <nav class="top-bar" data-topbar>
      <ul class="title-area">
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
      <?php
          wp_nav_menu();
      ?>
      </section>
  </nav>
  <!-- End of Top-Bar -->
</header>
            

         

Fig1

Fig2

topbarlogofoundation sites

Hi Gang,
Thanks in advance for any help you provide. I recently read the 'De-coding Top Bar Customizations' post from Rafi which is sent out via newsletter on Zurb's University Lessons. It was super helpful as I spend more time messing with Topbar than any other aspect of Foundation. The post didn't cover something which I do alot though.. Removing the logo from topbar and placing it above topbar.

This is fairly simple to do, yet I'm still having problems in how the app generated CSS affects my markup.

I've removed the logo HTML markup and placed it in it's own wrapper above the `` If I leave the header class 'contain-to-grid' in the header app.css generates the background color of my topbar to be the area above it where my logo is as well. Fig. 1. Yet when I remove 'contain-to-grid' from the header class, the logo area above topbar looks great, but topbar then loses it's 'contain-to-grid' rule and floats to screen left. (Fig2)

I am uncertain how to rectify this as overwriting app.css is not really possible.

My Header markup is included below as well. Any guidance would be super appreciated.

<header> // Crucial class="contain-to-grid" pending
  <!-- Logo & Ad space -->
  <div class="headertopWrap">
    <div class="name">
      <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    </div>
    <div class="header-adspace">
      // Ads go here
    </div>
  </div><!-- .headertopWrap -->

  <!-- Starting the Top-Bar -->
  <nav class="top-bar" data-topbar>
      <ul class="title-area">
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
      <?php
          wp_nav_menu();
      ?>
      </section>
  </nav>
  <!-- End of Top-Bar -->
</header>
            

         

Fig1

Fig2
Rafi Benkual almost 4 years ago

Glad you liked the lesson!

If I understand correctly - You should wrap the topbar only in contain-to-grid

<div class="contain-to-grid">
  <!-- top-bar -->
</div>

To make everything line up, wrap the logo in row and columns.

You can style the .contain-to-grid background to any color

.contain-to-grid {
  background: red;
}

Andrew Sepic almost 4 years ago

Hi Rafi,
Thanks for your prompt reply. It makes total sense. For some reason I just didn't think it could be that easy. I followed your suggestions and it worked like a charm.

For others who may look for the same answer here's my final header code

 <header>
  <!-- Logo & Ad space -->
  <div class="row">
    <div class="small-12 large-12 columns" id="headertopWrap">
      <div class="name">
        <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      </div>
      <div class="header-adspace">
        // Ads go here
      </div>
    </div><!-- .columns -->
  </div><!-- .row -->

  <!-- Starting the Top-Bar -->
  <div class="contain-to-grid">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
        <?php
            wp_nav_menu();
        </section>
    </nav>
  </div><!-- .contain-to-grid -->
  <!-- End of Top-Bar -->
</header>

Rafi Benkual almost 4 years ago

Awesome Andrew! Thanks for posting back your code, very helpful!