Technical Documentation Page (yes I have searched ;p)

I’ve checked through other similar topics and still cannot resolve my problem.

I’m failing on:

User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text “Hello world”, the page navigates to a section element that has that id and contains the corresponding header .

<li class="menu-header"><a class="nav-link" href="#JS_Documentation">JS Documentation</a></li>
<main id="main-doc">
            <section class="main-section" id="JS_Documentation">
                <header>
                    <h2>JS Documentation</h2>
                </header>               
            </section>
</main>

Am I going blind? I honestly cannot seem to see the problem, and it seems to work as intended.

I’m having some unrelated issues with codepen at the moment but will keep trying and post here if I get it working. This is the full info:

Here’s what my codepen currently looks like…

and the link: https://codepen.io/badgerfool/pen/OJPbvzP

and the full text of the error, couldn’t include in last post as I was limited to one image with being a new user.

I think my codepen issue is cache related as it seems to work fine in an incognito window, I’ll sort that later as I have other tabs I need open. Still testing with same error.

As an aside it looks ridiculous in chrome :man_facepalming: might redo the css, I styled it with it open in a live server using brave browser, no clue why it looks so different! :man_shrugging:

hmm so it should have failed at 12? I’ll get rid of the h2s and see if that works

Hmm h2 tags all gone and still failing. image

I will not tell you which one, but one of the anchor elements with class=“nav-link” has an id value with a typo. You will only have to change one character to get test #13 to pass.

1 Like

aaagh that was annoying! fwiw that wasn’t a typo, I actually changed the menu item to read “if-else” rather than “if…else” as it was in the example I copied from.

I know it says to use underscores but it seems odd to entirely exclude dashes!

Oh well, it passes now, and I restyled it to normal size so it doesn’t look so ridiculous :rofl:

Did you like my required media query? I was feeling lazy at that point :man_shrugging:

Thanks for the help @camperextraordinaire :grin:

Yeah I see, perhaps I should increase the pixels on my media query so that nobody notices? :rofl:

As it technically passes I’m not sure whether to style it for smaller screens or just move on to the next project, what would you suggest?

I wasn’t sure what was required when copy pasting into codepen as it clearly doesn’t need (!DOCTYPE html) among other things. :man_shrugging:

I’m still very new at this.

Hadn’t spotted this reply earlier, sorry my bad!

I just fixed the nav on my version (not codepen) and it made the bleed over problem worse even at desktop size!

Something to do with how I set up the flex box no doubt.

I still don’t quite get it, I much prefer grid.