navbar with border bottom effect code example

Example 1: css using border top border bottom to create a hamburger icon

.menu-toggle {
	border-top:6px solid #828282;
	border-bottom:6px solid #828282;
	display:inline-block;
	height:30px;
	margin-top:-15px;
	position:absolute;
	right:20px;
	text-indent:-999px;
	top:50%;
	width:40px;
}
.menu-toggle:before {
	border-top:6px solid #828282;
	content:"";
	left:0;
	position:absolute;
	top:6px;
	width:100%;
}

Example 2: css using border top border bottom to create a hamburger icon

.menu-toggle.on {
	border-top-color:#ff0;
	border-bottom-color:#ff0
}
.nav-toggle.on:before {
	border-top-color:#ff0;
}

Tags:

Css Example