example-code/styles/mysite-sass/partials/_navigator.scss

@use "sass:map";
@use "vars/vars";

header {
	background-color: white;
	padding: 4px 10px;
	// height: 3em;
	// display: flex;
}

header .logo {
	text-decoration: none;
	font-family:'EBGaramond-initials2', 'EBGaramond';
	display: block;
}

header a{
	text-decoration: none;
	color: black;
	margin: 0 auto;
}

header h1 {
	margin: 0 auto;
	width: 5em;
}

.nav-container {
	padding: 10px auto;
}

nav {
	// flex: 4;
	// display: flex;
	flex-wrap: wrap;
	padding: 10px;
	overflow: auto;
	margin: 0 auto 0 0;
	max-width: 40em;
}

nav .nav-item {
	// display: flex;
	align-items: center;
	text-align: center;
	text-decoration: none;
	padding: 0;
	color: vars.getColor('link-grey');
	flex: 1; 
	flex-basis: 2em;
}

nav a {
	text-decoration: none;
	color: vars.getColor('link-grey');
	font-weight: bold;
	transition: all 0.2s;
}

nav a::before {
	content: '\203A';
	font-size: 1.3em;
	transform: translateX(-60px);
	display: inline-block;
	opacity: 0;
	pointer-events: none;
}

nav a:hover::before {
	opacity: 1;
	transform: translateX(0);
}

nav .active {
	color: black;
}

.link-arrow {
	content: '\203A';
}

@media (min-width: 720px) {
	header {
		display: flex;
		padding: 3px;
	}

	header > div {
		flex: 1 5em;
	}

	header h1 {
		margin: 0;
	}

	nav {
		flex: 4;
		display: flex;
	}

	nav .nav-item {
		display: flex;
	}

	.nav-container {
		display: flex;
		flex: 4 20em;
	}

}
.link {
	color: vars.getColor('link-grey');
	text-decoration: none;
	font-weight: bold;
}

.link:hover {
	color: black;
}