publik-base-theme/static/universite-toulon/_header.scss

html {
	letter-spacing: .05rem;
}
#top {
	display: flex;
	align-items: center;

	@media ($max-mobile-viewport) {
		flex-direction: column;
	}
}

.theme-logo {
	margin: $space-medium 0;

	@media($max-mobile-viewport) {
		max-width: 180px;
	}
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 1;

	@media ($max-mobile-viewport) {
		width: 100%;
		order: 3;
	}
}

.gru-nav-wrapper {
	margin-top: 0;
	display: flex;
	width: 100%;
}

#toplinks {
	position: static;
	display: flex;
	align-items: center;

	@media($min-desktop-viewport) {
		margin-right: $space-medium;
	}

	.login, .logged-in {
		display: flex;
		align-items: center;

		&::before {
			content: "\f2bd"; // user-circle
			font-family: FontAwesome;
			color: $gray-1;
			font-size: 1rem;
			margin-right: 0.5rem;
		}
	}

	a {
		display: flex;
		color: white;
		text-transform: uppercase;
		font-size: 0.8rem;
		font-weight: 700;
		text-align: left;

		&:hover {
			text-decoration: underline;
		}
	}

	.login-link, .account-link {
		&::after {
			display: inline-block;
			margin: 0 $space-xsmall;
			width: 1px;
			height: 15px;
			background: white;
			content: "";
			vertical-align: middle;
		}
	}
}

div.gru-nav {
	@media($max-mobile-viewport) {
		width: 100%;

		.gru-nav-button {
			background: $primary-color;
			position: absolute;
			top: $space-medium;
			right: $space-medium;
			border: solid 1px white;
			padding: $space-xsmall;

			&.toggled {
				border-color: $secondary-color;
				.icon-bar {
					background: $secondary-color;
				}
			}

			+ ul {
				max-height: 0;
				transition: max-height $transition-1;
				margin-top: $space-small;
			}

			&.toggled + ul {
				max-height: 100vh;
			}
		}

		.menu, .submenu {
			&--link {
				text-align: center;
				font-weight: normal;
				text-transform: uppercase;
			}
		}

		.submenu {
			&--link {
				font-size: 0.875rem;
			}
		}
	}

	@media($min-desktop-viewport) {
		.menu {
			&--item {
				&:not(:last-child)::after {
					display: inline-block;
					margin: 0 $space-xsmall;
					width: 2px;
					height: 15px;
					background: white;
					content: "";
					vertical-align: middle;
				}

			}

			&--link {
				position: relative;
				z-index: 1;
				padding: $space-xsmall $space-small;
				text-transform: uppercase;

				&::before {
					position: absolute;
					z-index: -1;
					left: 0;
					top: 0;
					width: 0;
					height: 100%;
					content: "";
					background: transparent;
					transition: width $transition-1, background-color $transition-1;
				}

				&:hover::before {
					width: 100%;
					background: $secondary-color;
				}
			}
		}
	}
}

.theme-page-header {
	margin: $space-large 0;
}