Menu icon Foundation
Increasing the Height of the Top Bar

If I want to add a logo instead of h1 text in the navigation top bar, will the height of the navigation change automatically?

http://codepen.io/jgacuca567/pen/Qwdxmr

Right now the logo is bigger than the navigation

logo-heighttop-bar

If I want to add a logo instead of h1 text in the navigation top bar, will the height of the navigation change automatically?

http://codepen.io/jgacuca567/pen/Qwdxmr

Right now the logo is bigger than the navigation

Dan Maslach almost 5 years ago

Same problem here.. I've tried making a height to .top-bar { height:10rem; } in css. Works except when you goto a narrow screen, the first option is always shown and the background color messes up when clicking the menu.

Dan Maslach almost 5 years ago

Try this..
http://codepen.io/anon/pen/bNgjdj

Probably still need to mess with the code but I was able to get it extended and also not mess up when you have a narrow screen.. Hopefully it'll help a little.

James Van Waza almost 5 years ago

Anon, thanks, Looking much better, I tried making the menu center but on clicking the hover menu, it did not work. What could be the problem

Rafi Benkual almost 5 years ago

I'm assuming you're not using Sass. If you do, the topbar height is a variable and automatically vertically centers all the links buttons and forms.

This codepen is missing the foundation JS CDN http://cdn.foundation5.zurb.com/foundation.js

James Van Waza almost 5 years ago

Thanks Rafi the Menu Button is Working, but the height of the menu is still not centered, it shows at the top, how do I make it centered and when centered will it change how it looks on mobile?