On hover, hamburger menu icon will change to intended image on Dawn theme

[fahmicrile]

Hi All!

I’m new to Shopify and very much excited to be part of this community! Elephant in the room, I’m trying to solve this issue on my web. I’m trying to see if I can make an image/small icon appear when someone hovers over my hamburger menu icon.

This is the inspiration —> https://oatside.com/

This is the code I’ve added on my base.css & i found this code on this platform as well

This is the image I want to appear when someone hovers over my hamburger menu icon: its in png

Any kind souls out there willing to help please reach out to me I’m willing to learn as much as I can and thanks in advance!

[NomtechSolution]

1. In the left-hand side navigation, under “Assets,” locate and click on “theme.css” or “theme.scss.liquid” to open the theme’s CSS file.

If you couldn’t find the specific file mentioned above, look for a similar file that contains your theme’s CSS.

1. Add the following code to the CSS file:

.site-nav__icon::after {
  content: url('path/to/your-image.png');
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 9999;
}

.site-nav__link:hover .site-nav__icon::after {
  display: block;
}
​

[fahmicrile]

Hey Nomtech!

Really appreciate the response! With regards to theme.css or theme.scss.liquid, I’m not able to locate them. I saw someone mentioned the following,

'In Dawn theme, the Global CSS file name is base.css.

You should be able to find it assets/base.css file.’

Hence I went to post the code you’ve advise but it still doesn’t work Are you able to assist me on this please? I really want the coconut icon to appear so badly.