Need some help to fix this

HTML-CSS
1

Hello everyone! I’m struggling for a couple of weeks with a website I work and can’t find any solutions. After hours and hours of reading and searching for solutions I lost my patience lol. I want to mention I’m at the beginning of my journey as a Frontend Dev if I can call me like that.

This is the webpage I’m currently working . https://codepen.io/csp010/pen/BaKXwrq
My problems are the following (try first with Full Page View):

  • can’t make the navbar responsive, nav-links and logo are getting somehow out of their div when resizing
  • burger menu doesn’t work at all and I can’t get rid of that red box when resizing

Any help would be greatly appreciated. Thanks! :upside_down_face:

2

1)for the first problem, it’s because of whitespace:nowrap that you put on your a tags. I understand that it’s because you don’t want Book a Flight to look ugly and wrap on smaller screens, but the workaround is quite simple, you should lessen/remove the horizontal padding that your section has. I understand why you want to have a lot of padding on larger screens, but it’s not very needed when you get on to smaller screens.
Also consider lessening the padding between your links, right now you have 10 and the text breaks when you are at around 900 max width. Again, no need for so much padding when you are on lower screens. Just check where your stuff breaks and add a media query there.

  1. As for the burger menu, you can see the problem if you open the dev tools
    3412
    See how it’s crossed out? that’s because you still have transform:translateX(100%) in your .nav-links enabled and it’s overriding everything.
    As to why the red box is there and links arent, you have opacity: 0 in them.

Btw, something else that i’ve noticed, your logo h1 is breaking, you should display:flex there, it will consistently have the text be side by side with the image.
P.S would probably not want to have h1 be a parent to an image, i don’t think it’s semantically correct, just use a div instead.

Btw don’t feel bad for getting stuck there, it took me around 10 minutes to understand what the hell is going on, until i noticed the culprit white-space:nowrap, then it all made sense.

1 Like
3
  • image
    Your logo is of fixed size on all screen

  • image

    • Don’t you think 92vh is too big?
    • Due to overflow-x: hidden All other contents are hidden on devices less than 650px
    • red box that you mentioned is background of .nav-link with height 92vh

  • Whatever you’ve mentioned in the head section of codepen html
    it’ll not be in head but will be in body of your result webpage…
    You should add all the head tags in settings of your pen

    image
    image1036×671 24.8 KB

As mentioned by @happyworld it is easier to debug if you open your dev tools
Chrome Dev Tools guide

1 Like
4

I removed the whitespace: nowrap;, I added a 900 max-width media query, removed the li padding and #logo { display: flex; }. Now the nav it’s responsive. Your tips solved my first problem :smiley: :+1:t2:

As for the JavaScript burger menu, well, I didn’t figure out how I can fix it. When I click on the burger menu my li doesn’t show. I removed the transform: translateX(100%); and now the nav-links appear when resizing without clicking on the burger menu.

capture_20201004124708680
capture_202010041247086801235×1604 40.9 KB

@happyworld

I don’t think the size it’s the problem although I’m considering to make it smaller after the burger menu will work. And I added the red background-color to make it easier to detect the bug. I will remove the background-color also after the burger menu will work.

I forgot about this. I added the head like you said. Thanks!

5

@casper
About burger icon, told ya in my post, that you have opacity:0 on them

6

Forgot to mention about that, but I also changed the opacity to 1 and the burger menu still doesn’t work. Do you think it might be a problem in my JS code?

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links li");

  burger.addEventListener("click", () => {
    //Toggle Nav
    nav.classList.toggle("nav-active");

    //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation =
          "navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s";
      }
    });
    //Burger Animation
    burger.classList.toggle("toggle");
  });
};

navSlide();
7

Oh sorry I also forgot to mention that you are wrongly applying the class, that’s why transform isn’t working properly.
You have nav-links and you are setting transform:translateX(100%) and then you add an active class, by toggling it with the click of the menu icon. The reason why the active class isn’t working was because you aren’t calling it correctly in you CSS (there’s nothing wrong with your JS code)

Instead of calling it independently, call it together with your nav-links class.
Like this: .nav-links.nav-active that’s what you want to be doing if you want nav-links to change and you want nav-links transform to change to 0. This is equivalent to just rewriting every single CSS property that you have for nav-links in your nav-active and removing nav-links class on toggle. So you switch between the two. But the first approach feels much better to me, given that you don’t have to needlessly rewrite CSS.

P.S .nav-links.nav-active is not the same as .nav-links .nav-active the difference is a measly space, but their use is totally different.

Hope it explains that, feel free to ask additional questions if you are unsure about something.

1 Like
8

That explains a lot. You have no idea how much I appreciate your effort. I wouldn’t be able to solve this by myself.

Thank you @happyworld !