Menu icon Foundation
Top Bar Logo Cuts Off

I am trying to use a logo in place of text in the .name class. It looks fine in desktop view. When looking at it in mobile, the bottom of the logo gets cut off. I can't for the life of me figure out how to make this work.

<li class="name">
    	      <a href="index.html"><img src="images/my-logo.svg"></a>
		    </li>

.name {

    img {
      width: 200px;
    }
}
            

         

Skitch

topbarlogo

I am trying to use a logo in place of text in the .name class. It looks fine in desktop view. When looking at it in mobile, the bottom of the logo gets cut off. I can't for the life of me figure out how to make this work.

<li class="name">
    	      <a href="index.html"><img src="images/my-logo.svg"></a>
		    </li>

.name {

    img {
      width: 200px;
    }
}
            

         

Skitch

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Robert

Take a look at this Pen: http://codepen.io/winghouchan/pen/FsydE

It demonstrates the solution given by Asif!

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

Wing-Hou Chan over 5 years ago

Hey Robert!

Try this:

img
{
  position: relative; /* this is to make z-index work, just make sure it isn't static */
  z-index: 99; /* this number has to be higher than the topbar */
}

Alternatively you could make the height of the topbar the height of the image.

Asif over 5 years ago

you could resize the logo for small screens:

@media only screen and (max-width: 40em)
img.logo {
height: 1.8rem;
}

Let me know if this works.

Robert Ward over 5 years ago

Unfortunately, the z-index did not work. Increasing the topbar height is not something I'd prefer to do.

The small screen trick makes the logo too small when it fits into the top bar. I need it to overlap over the page.

Thanks for trying!

Wing-Hou Chan over 5 years ago

Hey Robert!

My apologies. It's the overflow: hidden; that stops the logo from showing.

I'm finding a workaround at the moment and will be back later today.

Robert Ward over 5 years ago

Thank you, Wing-Hou. When I try overflow: visible; it shows all of the navigation in mobile.

Robert Ward over 5 years ago

Any other ideas?

Asif over 5 years ago

if the above solutions dont work for you then you need not set the logo inside of the top bar, you could create a row and say 3 or 4 columns for the logo and then the rest for the top-bar, on small screens the logo would take the entire width on the top (small-12 columns) and the top-bar would come below it, This would be a design decision, so you might go through it with your designer before you try this out.

let me know if this works.

Robert Ward over 5 years ago

Would it be possible to see what that looks like? When I try it, the logo is still getting cut off.

Wing-Hou Chan over 5 years ago

Hey Robert

Take a look at this Pen: http://codepen.io/winghouchan/pen/FsydE

It demonstrates the solution given by Asif!

Asif over 5 years ago

Thanks Wing-Hou, that pen demonstrates exactly what I'm talking about.

Robert Ward over 5 years ago

Thank you very much. I will study this and give it a try!