Menu icon not fitting into the header

Curriculum Help Certification Projects
#1

Hello campers
I can’t figure out why the menu icon (Which should have the dropdown) won’t fit properly…
Someone please help me.

Your code so far
Here’s the link
https://codepen.io/ugoamaka/pen/vYNrKeg

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 8.1.0; CPH1909 Build/O11019) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

In the CSS:

  1. Update #header-img to:
#header-img {
  vertical-align: middle;
  max-width: 30px;
  border-radius: 50%;
}
  1. Remove the padding: 14px 16px; you have on all a tags, you can add the padding later to the rest of the a tags on the page with a more specific class so the menu is not affected
  2. Add display: flex to #header

In the HTML:
4. Move your pink icon right below the header so it looks like this:

<header id="header">
   <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   // rest of the header code

Making these changes gets your hamburger menu icon, website icon and title all in one line!

#3

That was really helpful…thank you very much @singhshemona, I really appreciate.
Only that I had to add the link after other header codes because I wanted it on the right…but the links in the menu icon are not droping down when I click on it…
any ideas how I can achieve that?

#4

Hmm…the “features / about us / etc” isn’t opening when you click on the black hamburger menu icon? It seems to be working for me :thinking: