Vulcan/packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss

// 1. Neutral
// 2. Mobile (+see Base theme for mobile nav)
// 3. Desktop
// 		a. Top Nav
//		b. Side nav

.header{
	background-color:$highlight-color;
	position:relative;
	z-index: 100;
}
.logo{
	a, a:visited{
		color:white;
	}
}
.sign-in{
	margin-right: 10px;
}
.nav{
	.top-nav &{
		@extend %vcenter;
	}
	@include cf;
	>li{
			line-height: 2;
			&:last-child{
				margin-right: 0px;
			}
			>a, >div >a{
				color:white;
				font-size:15px;
				font-weight:normal;
			}
		}
}

.has-dropdown .user-menu .dropdown-menu{
  left: auto;
  right: 10px;
 }
 .has-dropdown .notifications-menu .dropdown-menu{
  left: auto;
  right: 10px;
 }
 .newsletter-dismiss{
 	line-height: 30px !important;
 }

// ------------------------------------ Top Nav Layout ------------------------------------ //

.top-nav{
	.header{
		height: 60px;
		padding: 0 10px;
		margin-bottom:$grid-margin;
		@include cf;
		@include small{
			padding: 0 10px;
		}
	}
	.primary-nav{
		float:left;
		z-index: 20;
		position: relative;
	}
	.logo{
		@extend %vcenter;
		position:absolute;
		display:block;
		text-align:center;
		color:white;
		@include small{
			font-size: 18px;
			a{
				position: static;
			}
		}
		@include medium-large{
			font-size:24px;
		}
		left: 0px;
		right: 0px;
	}
	.logo-image{
		line-height: 1;
		a{
			display:inline-block;
			background: no-repeat center center;
			font: 0/0 a;
			text-shadow: none;
			color: transparent;
		}
	}
	.secondary-nav{
		z-index: 20;
		position: relative;
		float:right;
		.submit{
			// background:$red;
			// display:block;
			// padding:0px 10px;
		}
	}
	.header-submodule{
  	display: inline-block;
    margin-right: 20px;
	  &:last-child{
  	  margin-right: 0px;
  	}
	}
}
// ------------------------------------ Side Nav Layout ------------------------------------ //

$nav-width: 250px;

.side-nav{
  .inner-wrapper{
		@include medium-large{
	    margin-left: $nav-width;
	    padding-top: 10px;
    }
	}
	.header{
		@include medium-large{
			width: $nav-width;
			position: fixed;
			top: 0px;
			bottom: 0px;
			left: 0px;
			height: 100%;
			overflow-y: auto;
			padding-bottom: 30px;
		}
	}
	.logo{
		@include medium-large{
			margin-bottom: 30px;
		}
	}
	.header-submodule{
		margin-bottom: 30px;
	}
	.primary-nav{
		display: flex;
		flex-direction: column;
	}
	.search{
		order: 1;
	}
	.categories-menu{
		order: 2;
	}
	.dropdown-top-level{
		cursor: default;
		display: block;
		padding-bottom: 5px;
		position: relative;
		/* note: we use a pseudo-element for the border so we can control the opacity indepdently from the color */
    &:after{
      content: " ";
      display: block;
      position: absolute;
      width: 100%;
      height: 1px;
      background: currentColor;
      bottom: 0px;
      left: 0px;
      opacity: 0.5;
    }
	}
	.menu-label{
		display: block;
	}
	.menu-description{
		// display: block;
		display: none;
		font-weight: normal;
	}
	.account-link{
		display: block;
		font-weight: bold;
	}

	.account-link{
		margin: 10px 0;
	}
	.tagline{
		margin-top: 0px;
	}
}