diff --git a/scripts/nav.js b/scripts/nav.js index 4b7d173..3ce949e 100644 --- a/scripts/nav.js +++ b/scripts/nav.js @@ -20,19 +20,21 @@ const populateNav = function() { if (path === "/") home.id = "current-page"; nav.append(home); - let div = document.createElement("div"); + let ul = document.createElement("ul"); for (const item of navItems) { + let li = document.createElement("li"); let a = document.createElement("a"); a.href = item.href; a.innerHTML = item.title; if (item.href === path) a.id = "current-page"; - div.append(a); + li.append(a); + ul.append(li); } - nav.append(div); + nav.append(ul); } populateNav(); diff --git a/styles/main.css b/styles/main.css index f68f83f..81727c3 100644 --- a/styles/main.css +++ b/styles/main.css @@ -102,13 +102,13 @@ a:focus-visible { } p, -ul { +main ul { padding: .5rem; background-color: var(--color-alt); border-radius: 0 0 1rem 1rem; } -li { +main li { margin-left: 1rem; } diff --git a/styles/nav.css b/styles/nav.css index bacbfb0..e4a0ecb 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -19,11 +19,15 @@ nav a { } } -nav div { +nav ul { display: flex; justify-content: flex-end; } +nav li { + list-style: none; +} + /* this specifically handles the home button we want it taking up flex container space */ nav > #current-page {