Menu icon Foundation
setting topbar height with SASS

I have two top-bar in the same page, I wondering if how I can set different
$topbar-height (and maybe others variables) for each one.

I tried to used sass, with something like

// Foundation Sass Variables Go Here!
#header{
$topbar-height: 50px;
}

#myMenu{
$topbar-height: 25px;
}

topbarSass

I have two top-bar in the same page, I wondering if how I can set different
$topbar-height (and maybe others variables) for each one.

I tried to used sass, with something like

// Foundation Sass Variables Go Here!
#header{
$topbar-height: 50px;
}

#myMenu{
$topbar-height: 25px;
}


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran about 6 years ago

In your settings.scss file, scroll down to the Top Bar variables and change this variable to any pixel value: $topbar-height.

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

Ghaida Zahran about 6 years ago

In your settings.scss file, scroll down to the Top Bar variables and change this variable to any pixel value: $topbar-height.

Scott McPherson over 5 years ago

I think he wants a different height for each one of his top bars. I'm trying to do the same thing.

Jeff Kinley over 5 years ago

Unfortunately, when you change the height of your top-bar, it also affects the drop-down menu's as well. Anyone have a solution for this?

Rafi Benkual over 5 years ago

Jeff - are you using the Sass version or css? I am seeing everything line up right on the sass version.

If you are using the css version you need to make more edits for it to work like bottom margin from link.