Menu icon Foundation
How to add logo in top bar

I'm currently using the newest version of Foundation Sites in Sass. I would like to be able to add my .svg logo to the top left corner and not sure the best method to go about this. I would like the .svg logo to scale from Mobile to Desktop if possible. Please see the code that I have now. I did not include my logo since I'm not sure the best method to implement what I need.

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- 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">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
            

         

Top bar - .svg Logo- nav

I'm currently using the newest version of Foundation Sites in Sass. I would like to be able to add my .svg logo to the top left corner and not sure the best method to go about this. I would like the .svg logo to scale from Mobile to Desktop if possible. Please see the code that I have now. I did not include my logo since I'm not sure the best method to implement what I need.

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- 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">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
            

         
Tobias Malikowski almost 5 years ago

Hi Brian,

i'm using svg for icons and the logo on this site:

http://www.camba-bavaria.de/

Basically what you want to do is have all your svgs in a "icon sprite" in my example its icons.svg.
After that you can refer to this file with xlink:href. The #icon-camba-wordmark refers the the specific svg in the sprite. So theres no positioning stuff like with image sprites. There is also a bower libary for auto generating that icon.sprite from a src folder which includes all the svgs as single files, so you can easily edit, change, add or delete icons.

<svg class="wordmark">
     <use xlink:href="fileadmin/templates/camba/public/icons/icons.svg#icon-camba-wordmark" />
</svg>

However not all browers support this modern way (good old internet explorer). But theres a script called "svg4everybody" which solves this issue on older browsers.

The whole svg thing is a bit tricky so i highly recommend to read through the following links, which helped me alot:

http://css-tricks.com/svg-sprites-use-better-icon-fonts/
http://css-tricks.com/using-svg/
http://css-tricks.com/mega-list-svg-information/
https://www.youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be

Cheers,

Tobi

Rafi Benkual almost 5 years ago
Brian almost 5 years ago

Hi Rafi,

Yes, that is what I'm looking for. Can you please also show my how to do the following above like you did but this time add my .svg logo in the middle of the top-bar with some of my navigation on the left and right side? If you can that would be great and I would not have to add a new post for that.