Why is it doing this?!

Code Feedback
1

Why are my stupid nav-items under my h3 element?

https://codepen.io/hopefulcodegirl/pen/PoPEbee

Mind you, I am not even close to done on this random project so it really isn’t time for feedback but please help with the above question. Thank you!

2

you better start fixing your html coding structure,
to many errors.
it could be because of that.

1 Like
3

Because of the height on the header.

1 Like
4

Thank you so much! i got it now. I changed it to 10rem instead of 5rem.

5

I will of course be improving everything. i am in the very early stages of this webpage.

6

something like this

 <ul class="nav-list">
        <div class="menu-icons close">
        <i class="icon ion-md-close"></i>
      </div>
        
        <div class="cta">
          <a href="#" class="btn">Join Our Community   
          </a>
        <li class="nav-item">
          <a href="#" class="nav-link">Home
          </a>
        </li>
1 Like
7

Why do I now have two “join our community” links?

https://codepen.io/hopefulcodegirl/pen/PoPEbee

I am copying from a youtube video right now. After the video is through, I am going to customize the page and make it my own but even though I am copying this man’s work exactly. It’s not working out the same at all!

8

Because you have the link twice in the HTML (Line: 30 and 66).

  1. Your URL for the fonts is not correct, it should be:
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">

Or combined into one link:

<link href="https://fonts.googleapis.com/css2?family=Aldrich&family=Nunito&display=swap" rel="stylesheet">
  1. You have an incomplete URL for Bootstrap in the settings and it’s an old version. Should be.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css

  1. Your universal selector is broken. Should be.
*,
*:: before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

  1. You have a nav-list selector, it should be a class selector .nav-list. The same for menu-icons it should be a class .menu-icons.

  2. The cta div in the nav-list ul is unclosed.

Page with the corrections (will delete when you are done with it)
Edit: deleted https://codepen.io/lasjorg/pen/jOWNOpa

1 Like
9

Thank you very much. I will start fixing everything right now. :+1:

10

My hero! Thank you very much! It is fixed!

1 Like
11

No problem, happy to help.

I will delete my Codepen, you are done with it right?

1 Like
12

Yes, I think I am done with it. Thank you. :slightly_smiling_face:

13

wait, wait, wait! I am a perfect idiot! Did that correction page you made show me how to get rid of the double “join our community” link?

14

No, because I have no way of knowing which one you want and which one you don’t want.

Surely you can just delete the one you don’t want?

15

I don’t even know how the extra one got there! I don’t want the one that is my navbar.

16

Well, then delete it from the HTML.

1 Like
17

Thank you, i got it figured out. Earlier I had been fiddling and experimenting out of curiosity with my code and I added double without paying attention. Duh! It’s all my fault. Thank you for making my silly brain click.

1 Like
18

Hey, since I see a lot of people saying you have errors in your code, try using this tool a lot more : W3C Validator. It’s a useful tool that will go through your code and validate it, if there is some error, it will tell you.
NOTE: If you use CodePen, always ignore the first 2 errors

1 Like
19

Thank you very much! But how do I use that?

20

If you have an HTML file (It usually ends with .html), you can upload a file there. If you use CodePen, which you are, then copy and paste your code into the Validate by Direct Input Like this screenshot:

image
image1354×639 33.4 KB

1 Like