On regular sized devices (id="navbar" should be shown on the left side of the screen and should always be visible to the user

Tell us what’s happening:
Describe your issue in detail here.
I know this issue has been posted here several times but I have tried all of the solutions and none of them have solved my 15/16 problem. I have used both chrome and brave browser and I have changed the view into full page but still nothing works.

Your code so far

<main id="main-doc">
  <header>Technical Document</header>
  <section                                        class="main-section"
id="Introduction">
  <header>Introduction</header>
  <p> Welcome to my technical documentation page where I report all things technical and documented.</p> 
  </section>
  <section class="main-section"
           id="Things_About_Me">
    <header>Things About Me</header>
    <p> I enjoy playing tennis, eating good food, and wearing pretty clothes.</p>
    <p>Here is a list of my favorite things not to do.</p>
    <ul><li>Clean cat poop</li>
      <li>Running for any reason</li>
      <li>Washing dishes</li>
      <li>Sweating</li>
      <li>Artificial candy</li>
      </section>
    <section class="main-section"
             id="Places_I'd_Like_to_Visit">
      <header>Places I'd Like to Visit</header>
      <p>There are several places I would love to visit across the globe. It is nearly impossible to narrow down a list so I'm just going to address the ones I think of right now. Actually I'm going to just put a link to a website that is cool.
      </p>
    </section>
   <section class="main-section"
            id="Ajani_Goldmane">
     <header>Ajani Goldmane</header>       
      <a href="https://mtg.fandom.com/wiki/Ajani_Goldmane">Ajani Goldmane Facts of Glory</a>
     <p>When I was young I first learned of Magic The Gathering. Not from an intrest in MMRPGs or an over-obsession with nerdcore but because of my name.</p>
<section class="main-section"
         id="Code">
  <header>Code</header>         
     
      <code>
x = true;
if (x) then console.log("It is true");
</code> 
      <code>
x = true;
if (x) then console.log("It is true");
</code> 
           <code>
x = true;
if (x) then console.log("It is true");
</code> 
          <code>
x = true;
if (x) then console.log("It is true");
</code> 
           <code>
x = true;
if (x) then console.log("It is true");
</code> 
     
     <p>My name is shared with Ajani Goldmane, a powerful cat-warrior from this popular card game. When I would introduce myself to others some people would immediately mention this cat as a relative of mine. Although we are of no relation, I do honor Nagic The Gathering's use of culturally appropriate hero design. 
     </p>
     <p>Ajani in originality is in fact a warrior name. It means "one who possesses after a struggle or battle". In this sense the cat-warrior and I have much in common.</p>
     <p>Here is a list of all the ways Ajani Goldmane and I are similiar. 
   <ul><li>
     We are both feline lovers. He is a cat and I own a cat. I also feel a cat-like spirit inside me.
     </li>
     <li>We both have long luscious manes. Ajani Goldmane has grey hair and I have red hair but we both have long thick hair.</li>
     <li>Last but not least, both Ajani Goldmane and I are fierce. There are many definitions to that word but if you ever come across one of us you will immediately understand. Our presence is ravishing in all ways. Ajani's are powerful both in the Magic realm and reality.</li></ul>
     </p>
    </section>
    <section class="main-section"
             id="Conclusion">
      <header>Conclusion</header>
      <p>This is the conclusion of my technical document, thank you for attending</p>
    </section>
<code>
x = 5;
y = 6;
z = x + y;
</code>
    <br>
 <nav id="navbar">
  <header>Ajani's Document</header>
  <a class="nav-link" 
     href="#Introduction">Introduction</a>
  <a class="nav-link"
     href="#Things_About_Me">Things About Me</a>
  <a class="nav-link"
     href="#Places_I'd_Like_to_Visit">Places I'd Like to Visit</a>
  <a class="nav-link"
     href="#Ajani_Goldmane">Ajani Goldmane</a>
  <a class="nav-link"
     href="#Code">Code</a>
  <a class="nav-link"
     href="#Conclusion">Conclusion</a>
    </nav>
     
</main>

https://codepen.io/ajaniskt/pen/PopjQOR

@media only screen and (max-width: 600px) {
  

  
#navbar{ 
  position: fixed;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

From what I see in your code so far, there is a syntax error.

It looks like you forgot to close the @media rule, you are missing a }

The <ul> tag that starts on line 17 has no matching closing tag (not related to the navbar, but thought I’d point that out.)

Codepen has a neat little tool called Analyze which might help you a little bit during your development.

image

Thank you so much!! I was able to make those adjustments and it passed!

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

@ajaniskt

Glad I could help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.