Contents

// Desktop Navigation
#desktopNav {
	.navbar {
		margin: .25em 0;
	}
	
	.navigation {
	  list-style: none;
	  padding: 0;
	  margin-bottom: 0.5em;
	  vertical-align: middle;
	  
		li {
			margin-right: .75rem;
		
			a {
				color: $color-gray-smoke;
				font-weight: $font-semi-bold;
				
				&:before {
					height: 2px;
				}
				
				&:hover {
					color: $color-gray;
				}
			}
		}
		
		li:first-child {
			a {
				color: $color-gray;
			}
		}
	}
}

// Mobile Navigation
#mobileNav {

	.rm-menu-top {
		position: relative;
		
		.rm-menu-brand {
			color: $color-gray;
			font-weight: $font-bold;
			display: inline-block;
			margin: 15px 0;
			
			em {
				color: $color-main;
			}
			
			&:before {
				height: 2px;
			}
		}
		
		.rm-toggle {
			display: block;
			position: absolute;
			top: 0;
			right: 0;
		}
 	}
 	
	.navbar {
		background: $color-gray-darker;
		height: 0;
		overflow: hidden;
		@include transition (height, 0.5s, cubic-bezier(.68,-0.55,.27,1.55));
		
		&.open {
			height: 10.56em;
		}
	}
	
	.navigation {
		li {
			border-bottom: 1px solid $color-gray-dark;
			
			&:last-child {
				border-bottom: none;
			}
		}
		
		a {
			text-align: center;
			z-index: 1;
			
			&:before {
				height: 100%;
				width: 0;
				background-color: $color-main;
				z-index: -1;
				-webkit-transform: scaleX(1);
        transform: scaleX(1);
			}
			
			&:hover {
				color: $color-white;
				background: none;
				
				&:before {
					width: 100%;
				}
			}
		}
	}
}

// Responsive Rule
@media (min-width: 683px) {
	#desktopNav { display: flex; }
	#mobileNav { display: none; }
	
	#desktopNav .navigation {
		font-size: 0.75rem;
	}
}

@media (max-width: 682.999px) {
	#desktopNav { display: none; }
	#mobileNav { display: flex; }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
krad-3.7.5	_sass/layouts/_responsive-menu.scss
krad-3.7.4	_sass/layouts/_responsive-menu.scss