My nav bar thingy is not in the right place

Code Feedback
1

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

Those nav-links bars that are supposed to show you your navbar when you click it is on the wrong side and my navbar is not responsive. Please help me!

1 Like
2

I’m not sure I understand what you’re trying to accomplish here.

Also, your nav element is outside the nav links. Was that on purpose?

1 Like
3

No! It was not on purpose! I am following a video before I actually customize the web page and I have been having aaalllooootttt of problems!

1 Like
4

Well, actually not a lot of problems. Just a few and they were mostly my fault.

5

It’s OK. We can work this through. Let’s break your tasks down. Commence by putting an ordered list here on what you want to do.

For example:

  1. I want to have my navbar float to the right
  2. …
1 Like
6
  1. I want my nav-bar to float the right and the body to adjust accordingly.
  2. I need that symbol on the left to be a part of the x on my nav bar.
  3. I need my navbar to disappear and reappear on demand.

I hope I was clear. :grimacing: Unfortunately, it is way past my bedtime so I will continue with this in ten to twelve hours. Thank you for your help. Good night!

1 Like
7

  1. Sure, that can be done. Remember to have your elements inside your navbar. Also, give it a margin of 0 when you hit the mobile version.

  2. Is this for closing and opening the navbar? I didn’t use JavaScript for this. Do you want to use javascript or is it ok to use CSS for you?

  3. Your content should push the margin to the right almost the same or more the width of the navbar. For example, if your navbar is 300 px wide, your content should push the margin 320px right. Of course, when you hit the mobile version, you need to have the content close that margin to 0, or to the best of your style.

You can study what I did here?

1 Like
8

Thank you I will check it all out in the morning!

1 Like
9

Good morning! I’m a little confused. Could you tell me which part of your css makes your navbar responsive?

1 Like
10 
@media (max-width: 500px){
  nav {

 }
}

For example, if you’re navbar was placed to the right, in this code above, you can tell it to move to the top, and have the navlinks on a dropdown menu.

11

Ohhh! Okay thank you! I will get to work now. :slightly_smiling_face:

1 Like
12

Try changing the background for max width 500px to be green. And notice how when you shrink the page it turns green. That’s how it works… and that’s for all the elements in the DOM.

13

Do you think this might be a little over my head for my level. Should i just give up on this till later? Any way, the guy on the youtube video isn’t using Codepen and he is confusing the crap out of me.

1 Like
14

Is codepen really the best for coding projects?

15

I don’t think it’s a good idea to give up to media queries right now. Media queries allow you to design mobile, or any other screen size, for that matter.

It could be a little overwhelming at first, but what isn’t?

Let’s give it a try.


@media (max-width: 500px) {
  body {
  background-color: red;  
  }
}

Put that code at the end of your css and lower the screen size to mobile and see how the background changes from pink to red.

16

I meant to give up on the whole project.

17

I am finding it really stressful surprisingly. You know what, I think I’ll just step back and take a break with that project and then come back.

1 Like
18

Oh yeah, for sure. Hit me up when you come back and let me know if it worked.

1 Like