diff --git a/scripts/nav.js b/scripts/nav.js index 1a74ddd..4b7d173 100644 --- a/scripts/nav.js +++ b/scripts/nav.js @@ -1,9 +1,5 @@ /* Top nav */ const navItems = [ - { - href: "/", - title: "↩ back home" - }, { href: "/about/", title: "ⓘ about" @@ -18,6 +14,14 @@ const populateNav = function() { let nav = document.getElementById("top-nav"); let path = window.location.pathname; + let home = document.createElement("a"); + home.href = "/"; + home.innerHTML = "↩ home"; + if (path === "/") home.id = "current-page"; + nav.append(home); + + let div = document.createElement("div"); + for (const item of navItems) { let a = document.createElement("a"); a.href = item.href; @@ -25,8 +29,10 @@ const populateNav = function() { if (item.href === path) a.id = "current-page"; - nav.append(a); + div.append(a); } + + nav.append(div); } populateNav(); diff --git a/styles/nav.css b/styles/nav.css index da97e4b..bacbfb0 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -19,10 +19,21 @@ nav a { } } -#current-page { +nav div { + display: flex; + justify-content: flex-end; +} + +/* this specifically handles the home button +we want it taking up flex container space */ +nav > #current-page { visibility: hidden; } +nav > div > #current-page { + display: none; +} + header img { max-height: 25vh; max-width: 100%;