Can't make my navbar list stack in Technical Documentation project

Can't make my navbar list stack in Technical Documentation project
0

#1

Hey! First time posting, incredibly grateful to the help I’ve gotten through lurking the forum while working on my projects so far :relaxed:

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 :slight_smile: )

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 :slight_smile:


#2

It’s the other way around.

You need to wrap a elements with li elements.

Try to see what happens.


#3

Wow, thank you so much. That has worked a charm. Just plenty of other styling to fix now :rofl:

I’m sure I will understand it better one day, but is there a reason why the sample project given wraps li elements with a elements (and why it works)?


#4

Usually people do that way because they want to make entire li elements (usually blocks)clickable.

You can see that if you hover on its container blocks, you can click them to navigate without clicking their texts. But if we do the way that you just fixed then you can only click on texts to navigate instead of their boxes which is less convenient (You can see that in your project now).

Hope this helped :slight_smile:


#5

Yep that makes total sense. Appreciate the reply, you’ve been a great help :slight_smile: