-
Wale23
Dear GeneratePress Support Team,
I am encountering an issue while trying to change the lines of the mobile burger menu icon. Ideally, I should be hiding the default burger lines to insert my own custom icon (with sketch-style lines). However, even though I have correctly uploaded the image, the default burger menu lines remain visible, despite my efforts to hide them using display: none.
Since there doesn’t seem to be an option to modify this in the Customizer settings or the Off-Canvas panel, I attempted to change the color of the default burger lines to black via CSS. While the lines do turn black, the issue is that the toggle button appears with large and thick lines, which seems to be an undesired result, even though I haven’t set a specific size — I’m only changing the color.
It would be preferable to completely replace the default lines with my custom image, but currently, despite using display: none, the default lines continue to be visible alongside my image.
Could you kindly assist me in resolving this issue? I would appreciate any advice on how to completely remove the default lines and make sure only my custom image is displayed.
Thank you for your help!
Best regards,
Valentina
https://valentinab124.sg-host.com/ -
Hi there,
Try this CSS:
button.menu-toggle .icon-menu-bars { display: none; } span.mobile-menu { color: #f7f7f7; }
-
Wale23
Thank you for your feedback. Unfortunately, the CSS you sent does not seem to work as expected, and it appears that the issue might be impossible to resolve. I appreciate your efforts, but it seems we are at an impasse with this particular solution. :'(
-
This is what I see with the CSS:
https://app.screencast.com/hygtTbvMa9Tqs -
Wale23
The CSS is displaying correctly, but unfortunately, the default white lines of the burger menu are still visible. If I remove the “mobile menu” label, my image disappears. The default lines of the menu remain white, while it should only display my image as the mobile menu icon. :'(
-
OK, remove my CSS.
and add
!important
towidth
for this css:@media (max-width: 768px) { .menu-toggle { background-image: url(http://valentinab124.sg-host.com/wp-content/uploads/2025/01/burger-toggle.png) !important; background-size: contain !important; background-position: center center !important; background-position-x: center !important; background-position-y: center !important; background-repeat: no-repeat !important; width: 30px; height: 30px; border: none !important; padding: 0 !important; } }
add this CSS:
.menu-toggle span.mobile-menu { display: none; }
-
Wale23
Thank you for your support. I’ve implemented the requested changes, but the issue persists. It seems impossible to change the toggle menu with my custom icon using CSS, and even the simple color change with CSS, using !important, doesn’t work. If inserting the custom icon is not possible, my second option would be to change the color of the menu with CSS, but this also doesn’t seem to work. To avoid further issues, we would have to keep the theme as is and only change the content, which I’d prefer to avoid.
-
Wale23
aaaah! i’have modified the padding, itr’s correctly!!!! thankyou so much, the problem is resolved!!! 🙂 🙂 🙂
-
Glad to hear that 🙂
- You must be logged in to reply to this topic.