Beginner Hamburger Help

HTML-CSS
1

Hello all, this is my first attempt at making a simple hamburger menu to try and finish off my landing page. I have no idea what I’m doing and essentially tried to adjust some code for a previous project that had the classes and JS laid out. Still I’ve run into some issues as you can see. The dropdown doesn’t work, and it isn’t placed well (I can probably figure this out, unless it’s more complicated than it first looks)

For mobile version, I’d like to move my Bon logo to the center, for some reason I haven’t been able to get this to happen. I’ve tried applying a centering margin on the .logo and #header-img without any luck.

Another issue I’ve discovered is my nav-list. I cant figure out why it is pushed to the right as I’ve discovered with devtools. I’ve tried playing around with this class as well as nav-item. Help or tips appreciated.

Thank you all.

2

  1. The selector for the nav in the JS should be #nav-bar, not #nav.

  2. You need to increase the specificity of the selector or use !important for the property values.

#nav-bar.nav--visible {
  visibility: visible;
  height: auto;
  position: relative;
}
  1. As for centering the logo, set it to display: block.
3

Thanks for your suggestion.
I still am not sure as to why my burger menu does not work. I have checked it against the code I borrowed it from (Kevin Powell) and made sure I have like for like, his example did not have any added specificity and I am really not familiar with specificity myself, so forgive my ignorance there.

I have REALLY struggled with the video aspect of this project, the video is always too small and does not behave as I would expect when using flex:1 (no change) or putting a percentage for width (makes the video even smaller and creates a white space between it and .sirene-prouduct
In any case I have messed around with this and the footer section ( think I have this fixed now) so much that I have now created some side scrolling that does not show the overflow on Chrome dev tools so I guess you might say I am a bit stuck.

4

When borrowing code you will often not be able to just plug and play because the code you’re borrowing may depend on other things that you don’t have set up correctly. But there is nothing wrong with looking at someone else’s code to get an idea of how they are doing it and then implementing it yourself.

As for the hamburger icon, it is showing up for me when I narrow the view port, it’s just not doing anything when I click it. One of the first places you should look is the console tab in your browser’s dev tools. That place often has the answers to your questions :slight_smile:

5
  1. You are not using the correct element in the JS.

This is the nav element:

const navBar = document.querySelector("#nav-bar");

But you are using nav

nav.classList.toggle("nav--visible");

it should be navBar

navBar.classList.toggle("nav--visible");

  1. You are setting visibility: hidden using an id selector.
#nav-bar {
  width: 100%; 
  visibility: hidden;
  height: 0;
  position: absolute;
}

You add this class to the element when clicking the menu. It can not overwrite the CSS set in the id selector as a class selector has lower specificity.

.nav--visible {
  visibility: visible;
  height: auto;
  position: relative;
}

class-styles-overwritten

Here it is with the higher specificity selector

#nav-bar.nav--visible {
  visibility: visible;
  height: auto;
  position: relative;
}

with-higher-specificity-selector
with-higher-specificity-selector1062×496 52.9 KB

6

Aaah thank you, this is really helpful!
Yes as I haven’t done this before I didn’t know that the nav in nav.classList.toggle("nav--visible"); should be my id name specifically (vs targeting the <nav> directly).
The information about the visibility is along the same lines, so the error in CSS makes a lot of sense too.
I normally use classes rather than id’s, but as it is something needed to pass the test suite…this was the only difference between mine and the code that I borrowed, it makes a big difference.

To bbsmooth, thanks for the tip on the console section of devtools. Unfortunately I don’t know what it actually means…yet. I guess it means some things are not matching up as they should as lasjorg mentioned.

You guys rock. Thanks again!

7

You can learn more about Chrome developer tools. Firefox has the same set of tools and its own documentation.

1 Like
8

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