Menu icon Foundation
Menu-Icon Not Showing Up

Maybe someone else is having the following issue, so I'm posting here in case it might save someone some time.

I did a fresh Foundation 6.2 project install last night and could not get the menu-icon to appear on small screen sizes. Even the html template files provided by Zurb would not work with my complied SCSS. I dug a bit and found that the following was missing from my compiled SCSS:

.menu-icon {
    position: relative;
	cursor: pointer;
	width: 20px;
	height: 16px
}
.menu-icon::after {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	box-shadow: 0 7px 0 #fff, 0 14px 0 #fff
}
.menu-icon:hover::after {
	background: #cacaca;
	box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca
}

but the .menu-icon.dark css was there. Weird, right?

Adding the above to the bottom of my app.scss got the menu-icon to appear, but , you know, that seemed a little hackey and I wanted to try to fix it right. More digging through bower_components/foundation-sites/scss/components gave me a little insight, but no clear solution.

Long story short, I had to go into my app.scss file and add the following at around line 27

@include foundation-menu-icon;

And that seemed to do the trick.

tl;dr- If you are having problems with the menu-icon not appearing add the above code to app.scss at line 27.

menu-iconFoundation 6.2top-baroff canvashamburger

Maybe someone else is having the following issue, so I'm posting here in case it might save someone some time.

I did a fresh Foundation 6.2 project install last night and could not get the menu-icon to appear on small screen sizes. Even the html template files provided by Zurb would not work with my complied SCSS. I dug a bit and found that the following was missing from my compiled SCSS:

.menu-icon {
    position: relative;
	cursor: pointer;
	width: 20px;
	height: 16px
}
.menu-icon::after {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	box-shadow: 0 7px 0 #fff, 0 14px 0 #fff
}
.menu-icon:hover::after {
	background: #cacaca;
	box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca
}

but the .menu-icon.dark css was there. Weird, right?

Adding the above to the bottom of my app.scss got the menu-icon to appear, but , you know, that seemed a little hackey and I wanted to try to fix it right. More digging through bower_components/foundation-sites/scss/components gave me a little insight, but no clear solution.

Long story short, I had to go into my app.scss file and add the following at around line 27

@include foundation-menu-icon;

And that seemed to do the trick.

tl;dr- If you are having problems with the menu-icon not appearing add the above code to app.scss at line 27.

ravi over 3 years ago

I had the same issue, adding following solved it.

@include foundation-menu-icon;

Thanks
Ravi

Tiono over 3 years ago

Just tried Foundation today. Download the complete css and also has same problem. I add the missing menu-icon class to foundation.css and after that menu button icon working again.

Somebody should fix this so that newbie like me doesn't confuse.

Vitaliy Ziborov over 3 years ago

I had the same problem in css version. After read this topic I use ZURB template and see that

@include foundation Menu icon;



included in foundation.scss.

Menu work perfectly.

But I see many links to scss files in Incpector window.
Than I decide build production version, I run

npm run build

and as a result I can see that in the CSS version does not work mobile menu(
due to lack of relevant CSS style sheet.
 How can I build a production version with full set of styles for mobile menu?

Rafi Benkual over 3 years ago

What does your HTML look like? The menu icon needs the .menu-icon class and the <span></span> to show.

Vitaliy Ziborov over 3 years ago

Hi, Rafi.

as I wrote above about my work with ZURB template:

                 Menu work perfectly.

                 But I see many links to scss files in Incpector window.

The problem is in css-version building only. Then I collect all css rules for top menu that I see in Inspector to my css file, all works fine.

I try to find right way to build production version. I want to clean  production version from all SCSS dependencies.

p.s. Sorry for bolding text, I can`t find how formating citations.