Add a hamburger toggle to my website – HTML & CSS – SitePoint Forums

Do you have a question here, @Apache, or something you need help with?

Yes, I posted my question in this thread if you look up.

body {
    margin: 0;
}
header {
  background-color: rgb(212, 209, 209);
  display: flex;
  flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
  align-items: center;
  padding: 5px 4%;
  justify-content: space-between;

}

.logo {   
    margin-left: 20px;
    cursor: pointer;     
}

.nav {
    display: flex;
    gap: 1rem;
    padding: 0;
    align-items:center;
}

.link {
    background: none;
    border: none;
    text-decoration: none;
    color: #777;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    padding: 0;   
}

.dropdown.active > .link,
.link:hover {
    color: black;
}

.link:last-child {
    margin: auto;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(150% + 0.25rem);
    background-color: white;
    padding: 0.75rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active > .link + .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.information-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 2rem;
}

.dropdown-links {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.login-form > input {
    margin-bottom: 0.5rem;
}
#signup {
    
    padding: 10px 25px;
    background-color: rgba(0,136,169,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;   
}

document.addEventListener("click", e => {
    const isDropdownButton = e.target.matches("[data-dropdown-button]")
    if (!isDropdownButton && e.target.closest("[data-dropdown]") != null)
    return

    let currentDropdown
    if (isDropdownButton) {
        currentDropdown = e.target.closest("[data-dropdown]")
        currentDropdown.classList.toggle("active")
    }

    document.querySelectorAll("[data-dropdown].active").forEach(dropdown => {
        if (dropdown === currentDropdown) return
        dropdown.classList.remove("active")
    })
})

You have the menu toggle in place but you called it something other than #to toggle so the JS needs to change to reflect that. You called him #mobile-menu.

You haven’t actually styled the burger, so you need to grab the styles that create the burger from where you saw this code.

Once in place, you would set it to display:none by default, then use a media query at the required width to display it. At the same point in the media query, you should redefine the navigation so that it is below the header, as is usually required.

Here’s a basic start, but as you learn, I’ll leave it up to you to fill in the gaps.

#mobile-menu {
  display: none;
  height: 50px;
  width: 100px;
  background: red; /* just for testing - you need to find the correct css for this*/
}

/* I've used 800px as the trigger point but this needs to change based on the design */
@media screen and (max-width: 800px) {
  #mobile-menu {
    display: block;
  }
  .nav {
    display: none;
  }
  .active + .nav {
    display: block;
  }
  /* Now from here you need to style the way you want that dropdown to look on small screen.
  This would probably be using absolute positioning to show the menu over any other content*/
  
  /* e.g. just for starters*/
  header {
    position: relative;
  }
  .nav {
    position: absolute;
    left: 0;
    top: 100%;
  }
  /* now adjust all the styling for the list elements as required*/
  /* ??? */
}

 The js is changed to reflect the correct hamburger id.

const toggle = document.getElementById("mobile-menu");
toggle.onclick = function () {
  toggle.classList.toggle("active");
};

It’s a basic start for you to get it working, so all you have to do now is style it to your needs 🙂

Thanks a lot, buddy. I really appreciate your unlimited support. You’re right. This code is left over from a previous project that I forgot to delete. But as you mentioned, I will try to figure out the rest, so that the learning process is more efficient. Can I call you back if I’m blocked?

What about the html, do I need to make any changes? Or should I keep it as it is now?

You might be interested in the discussion in a similar thread where I discuss using nested lists for HTML.

The last example shows the difference when using a nested list. It’s not bad to use normal HTML but it’s much more extensible in the nested list approach and allows unlimited nestings more easily. There is no need to change if you don’t follow this approach.

Note that there is no burger in this example as we were only talking about the basic menu.

Of course, post if you get stuck. I’m away until Sunday afternoon, but hopefully someone else will step in before then.

OK! Tremendous. Did you mean this discussion with OBXjuggler? I don’t think we have a similar project. I needed the html code to be able to combine it with the css code you provide me

In this discussion, I talk about nested lists and show an example of my preferred approach. The original HTML code was similar to yours to make a useful comparison

I did not intend to copy the code but rather to understand the differences to help you in your learning

Ah! OK! Now I understand your intention. You are certainly right, copying and pasting is not very effective learning, but getting advice and finding the solution is the best way to learn programming.

Hello again dear Paul,

I came back to you with almost the same subject. I tried on my own to make my website disappear into a vertical navigation menu with the two drop down buttons on the left side when I click the hamburger button. But I couldn’t complete this step. Could you please help me with this problem?? At the bottom you can see a link for the style I’m working on in example 2

https://mdbootstrap.com/snippets/jquery/mdbootstrap/911242

index.html (2.5 KB)
styles.css (1.7 KB)
script.js (1.0 KB)

I copied the new code into a codepen and basically added the code I gave you in the previous answer

I very roughly styled the dropdown when the burger is open so you can see what to do. It is not meant to be a finished product as such. I wouldn’t actually use the same HTML as you for the dropdown, but I explained it in a previous post and would have used a more structured list approach and more consistent button usage.

However, the demo serves as an example on how to implement the hamburger and start styling the dropdown.

I think bootstrap does a lot of what you want. Did you implement it?

OK! What do you mean by bootstrap?

OK! Great. You rebuilt almost exactly the design I wanted it to be. Well, I found a way to make a hamburger button. Although I tried several times to move it to the right and the toggle too but just couldn’t do it.

index.html (2.6 KB)
styles.css (2.4 KB)

Obs! Could you please tell me how can I publish my code on CODEOEN as the way does? ?

I gave you the code for this, so you don’t know what you are asking?

The CSS you posted doesn’t have the media query in place and you’re not hiding the fullscreen button. With the media query in place, the navigation is hidden and the hamburger automatically goes to the right as the navigation is moved to its new position.

You seemed to have entered another code for the burger, but I suggest you use mine and style it as you wish. The hamburger code in your example looks like a checkbox hack and there should be a whole bunch of css to go with it.

I suggest you work from my working code.

He probably means the frame you keep mentioning! Bootstrap5 is the latest version. It has components that create hburgers and ready-to-use drop-down lists.

However, I don’t believe you are at a level where you could use it properly as it has a steep learning curve and indeed once you know how to use it you could have done without it.

Sign up for a free account on codepen and once you’re done with your pen, just paste your codepen url into your post here and it will automatically show a built-in pen.