Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one:
How to Resize Image Using CSS Pseudo-elements
I still couldn't get it to work properly. Initially, I tried modifying my code in this manner:
.nav-btn:before {
background-image: url('icons/mobile_menu_bttn.png');
background-size: 16px 16px;
width: 16px;
height: 16px;
content:"";
}
Unfortunately, this modification caused the code to break entirely.
Originally, my code looked like this:
.nav-btn:before {
content: url('icons/mobile_menu_bttn.png');
}
I experimented with just adjusting the width and height properties separately, but that didn't yield the desired results either.
Is there anyone who has successfully achieved what I am trying to do? Any guidance or advice would be greatly appreciated.