Menu icon Foundation
Topbar social icon viewable in all screen sizes

Hey Team! Tanzil emailed us with a question about adding a logo to topbar. We're sure the answer will help some of you.

--

Hi Guys

I want to know how do I add a social media icon to the top bar navigation and for it to show on all width/devices? On the desktop it looks fine but when I resize the page and the menu collapses, the menu is not clickable/expandable

Thanks

Tanzil

The codes are below:

       <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="#">
            Tanzil Ahmad
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
        <li class="divider"></li>
        <li><a href="#">Home</a></li>
        <li class="divider"></li>
        <li><a href="#">Portfolio</a></li>
        <li class="divider"></li>
        <li><a href="#">Contact</a></li>
        <li class="divider"></li>
        <li><a href="#"><img src="twitter-32 copy.png" width="22" height="18" /></a></li>
        <li class="divider"></li>
      </ul>
    </section>
  </nav>
 
  <!-- End Top Bar -->
            

         

Screen shot 2014 01 06 at 22.55.02

topbarsocialicon

Hey Team! Tanzil emailed us with a question about adding a logo to topbar. We're sure the answer will help some of you.

--

Hi Guys

I want to know how do I add a social media icon to the top bar navigation and for it to show on all width/devices? On the desktop it looks fine but when I resize the page and the menu collapses, the menu is not clickable/expandable

Thanks

Tanzil

The codes are below:

       <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="#">
            Tanzil Ahmad
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
        <li class="divider"></li>
        <li><a href="#">Home</a></li>
        <li class="divider"></li>
        <li><a href="#">Portfolio</a></li>
        <li class="divider"></li>
        <li><a href="#">Contact</a></li>
        <li class="divider"></li>
        <li><a href="#"><img src="twitter-32 copy.png" width="22" height="18" /></a></li>
        <li class="divider"></li>
      </ul>
    </section>
  </nav>
 
  <!-- End Top Bar -->
            

         

Screen shot 2014 01 06 at 22.55.02

Rafi Benkual gave the most helpful answer for this post
Rafi Benkual over 5 years ago

Not sure if this is the positioning you want, but you can move it around:
solution: http://cdpn.io/Abxwz

Click edit pen in lower left to see code.

This post has been closed. No new replies can be added.

Rafi Benkual over 5 years ago

Here is a similar question where we targeted small screens with a back button in the mobile menu:
http://foundation.zurb.com/forum/posts/1327-topbar-back-button-and-submit-search-input

This should get you started. Anyone else have a solution?

Rafi Benkual over 5 years ago

Not sure if this is the positioning you want, but you can move it around:
solution: http://cdpn.io/Abxwz

Click edit pen in lower left to see code.