"Hamburger" menu icon on mobile device

Hikin' Mike · September 20, 2022

@BeautifulWorld said:
Hi @Hikin' Mike - Hope you are well. I am coming back to smugmug after a while and revamping my photos and galleries. I dug out your code for the hamburger menu. I like the way everything looks except for the gray bar below the menu icon.
https://www.karthikrajaphotography.com/
Not sure how to hide that away. Any ideas?

Thanks
Karthik

That's not my code and I have no idea, sorry.

Hikin' Mike · September 20, 2022

@BeautifulWorld said:
Hi @Hikin' Mike - Hope you are well. I am coming back to smugmug after a while and revamping my photos and galleries. I dug out your code for the hamburger menu. I like the way everything looks except for the gray bar below the menu icon.
https://www.karthikrajaphotography.com/
Not sure how to hide that away. Any ideas?

Thanks
Karthik

Your code had comments and I was able to find the original coder: https://codepen.io/erikterwan/pen/EVzeRP

If you remove this:

#menu {
position: absolute;
width: 200px;
margin: 10px 0 0 0px;
padding: 10px;
padding-top: 5px;
opacity: 1;

background: #909195;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */

transform-origin: 0% 0%;
transform: translate(-100%, 0);

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

And use this instead, it should work.

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;

  background: #909195;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

BeautifulWorld · September 20, 2022

You are the best. Thank you for taking the time to help even though it was someone else's borrowed code. Really appreciate it.

"Hamburger" menu icon on mobile device

Comments