Hey! First time posting, incredibly grateful to the help I’ve gotten through lurking the forum while working on my projects so far
Right, so I have my Technical Documentation project here: https://codepen.io/johnhowardroberts/pen/bxGxxX
I cannot for the life of me seem to make my navigation list stack vertically. This is evident both in default viewport, and when the media query kicks in (there’s plenty wrong with my media query, but baby steps for now )
I played around with it for a while, before realizing that I think the selector itself is wrong (as no changes are taking effect when I edit the navbar
element - but I cannot see what is wrong with it.
Here is the navbar
element itself:
<nav id="navbar">
<header id="How_To_Cook_Eggs">How To Cook Eggs</header>
<ul>
<a class="nav-link" href="#Introduction_to_Eggs"<li>Introduction to Eggs</li></a>
<a class="nav-link" href="#Fried_Eggs"<li>Fried Eggs</li></a>
<a class="nav-link" href="#Boiled_Eggs"<li>Boiled Eggs</li></a>
<a class="nav-link" href="#Scrambled_Eggs"<li>Scrambled Eggs</li></a>
<a class="nav-link" href="#Poached_Eggs"<li>Poached Eggs</li></a>
</ul>
</nav>
And here is the styling for the li
:
#navbar li {
color: black;
position: relative;
width: 100%;
list-style: none;
border: solid 1px;
display: inline-block;
}
I know this is wrong, as color
has no effect. I tried to change the above to reference the nav-link
class, but that doesn’t have any effect either.
I’ve hit a dead end! Any help appreciated.
Thanks