Menu icon Foundation
How to make logo taller than top-bar?

I'd like to make the taller than the height of the top bar but I can't for the life of me figure out a simple solution..

I just want the logo to be displayed fairly large without needing to make the entire bar that tall (this makes bg hover and active states for the menu items insanely huge)

top-barlogocustom top-bar

I'd like to make the taller than the height of the top bar but I can't for the life of me figure out a simple solution..

I just want the logo to be displayed fairly large without needing to make the entire bar that tall (this makes bg hover and active states for the menu items insanely huge)


Brett DeWoody gave the most helpful answer for this post
Brett DeWoody over 5 years ago

Here's a jsFiddle that should get you close. Depends on how you want to handle the logo at the small size.

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

Brett DeWoody over 5 years ago

Here's a jsFiddle that should get you close. Depends on how you want to handle the logo at the small size.

Moreland over 5 years ago

If you know how much it will go over, you can just have the css give it a negative top margin.

.logo { margin-top: -25px; }

Rafi Benkual over 5 years ago

Or you can set a max-width to the image depending if it is clear enough to see when it's small. You could also use interchange to swap in a different image size for a breakpoint.

Preston McPeak over 5 years ago

You want the logo within the top bar, but you don't want it to affect the top bar's container? If you are making the logo within the top bar container bigger, the top bar will adjust to do so. A solution may be to remove the logo from the top bar in general.

Rafi Benkual over 5 years ago

can you post the code you have so far so we can help you?