feat: Update nav menu to reflect Rachel design (b9df1a24) · Commits · Research Enablement / Sites / Research

src/components/Header.astro

+22 −14

Original line number	Diff line number	Diff line
		@@ -21,8 +21,9 @@ const { title, subtitle, isAboutPage } = Astro.props;
		</script>
		<style is:inline>
		:root {
		--logo-size: 150px;
		--header-width: 50vw;
		--logo-height: 43px;
		--menu-height: 60px;
		}
		h1 {
		margin: 0;
		@@ -58,28 +59,35 @@ const { title, subtitle, isAboutPage } = Astro.props;
		}
		}
		}
		#navigation-menu-container::before {
		content: url("/assets/logo_ornl_green.svg");
		width: var(--logo-size);
		height: var(--logo-size);
		margin-right: 20px;
		position: relative;
		display: inline-block;
		top: 10px;
		}
		#navigation-menu-container {
		height: 56px;
		display: flex;
		height: var(--menu-height);
		max-width: 2000px;
		min-width: 1000px;
		width: var(--header-width);
		margin: 0 auto;
		min-width: 1000px;
		position: relative;
		display: flex;
		vertical-align: middle;
		width: var(--header-width);
		z-index: 1;
		& > nav {
		margin-left: auto;
		}
		& .NavigationMenuLink {
		font-size: 1.2rem;
		padding: 10px;
		}
		& .NavigationMenuLink:hover {
		border-top: 4px solid var(--primary);
		}
		}
		#navigation-menu-container > a > img {
		display: inline-block;
		margin-left: 5px;
		margin-right: 20px;
		margin-top: calc((var(--menu-height) - var(--logo-height)) / 2);
		position: relative;
		display: inline;
		height: var(--logo-height);
		}
		@media screen and (max-width: 400px) {
		header {

+3 −0

Original line number	Diff line number	Diff line
		@@ -7,6 +7,9 @@ import {

		export default () => (
		<div id="navigation-menu-container">
		<a href="https://www.ornl.gov">
		<img src="/assets/logo_ornl_green.svg" alt="ORNL Logo" />
		</a>
		<NavigationMenu className="NavigationMenuRoot">
		<NavigationMenuList className="NavigationMenuList">
		<NavigationMenuItem>