Menu icon Foundation
Bug in Top-bar?

I have recently been pounding my head against the wall with trying to add a simple image logo to the top-bar code - 

<div class="top-bar-title">
    <span data-responsive-toggle="topbar-responsive" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
    </span>
    <a class="topbar-responsive-logo" href="#"><div class="title-bar-title"><img src="assets/img/CMB_logo_lt.png" alt="" /></div></a>
  </div>

After a lot of trial and error, I discovered that topbar img asset cannot be an svg file.  I had to save my logo as a png and everything worked fine.

So I'm not sure if this is a bug or somehow I missed the documentation.  I hope this helps someone.

 

-Scott

topbar

I have recently been pounding my head against the wall with trying to add a simple image logo to the top-bar code - 

<div class="top-bar-title">
    <span data-responsive-toggle="topbar-responsive" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
    </span>
    <a class="topbar-responsive-logo" href="#"><div class="title-bar-title"><img src="assets/img/CMB_logo_lt.png" alt="" /></div></a>
  </div>

After a lot of trial and error, I discovered that topbar img asset cannot be an svg file.  I had to save my logo as a png and everything worked fine.

So I'm not sure if this is a bug or somehow I missed the documentation.  I hope this helps someone.

 

-Scott

Ryan Patterson over 2 years ago

Hi Scott,

 

I'm sorry if I'm not fully understanding you, but can you explain why you believe you can't use an SVG in the tob-bar-title container? Are you referring to an SVG image file, or the SVG code? An SVG image file should work the same as a png, obviously you might have to specify the height and width for it to display correctly but it should work. 

 

I don't know, just doesn't seem correct to me. Am I missing something?

 

Ryan

Rafi Benkual over 2 years ago

svg's often will need a set height or width - adding it resolves this

https://codepen.io/rafibomb/pen/bWqGQL

Also - something happened to your link alignment - not vertically centered. The best way to controll the height of the topbar is to adjust the padding

adjusting the line-height of the a tags will help