How to change Mobile Menu Hamburger Icon Size?

Hello @brs76,

That CSS may not work correctly if you have a custom header or icon. Also, sometimes, cache issues cause trouble in seeing the result.

To check the issue on your site, kindly share a live URL from the issue, and I’ll write another custom CSS for it.

Best Regards

Hi and thank you for your reply. I use Oceanwp on my all websites and I don’t do any custom headers because Oceanwp is already perfect enough. But I prefer to use the SVG logo file type at my sites; maybe it is affected.
My website: https://turkishfoodie.com
Thanks in advance and best regards,

Hi; I guess I found a solution and it worked.
I “untick” the “Display Menu Text” option at Customizer > Header> Mobile Menu and then I added the below CSS code:
.oceanwp-mobile-menu-icon a:first-child {
font-size: 25px;
}
It worked for me. I hope this didn’t break any other CSS code at my site.

Hello @brs76,

Well, the CSS is correct, all it needs is a tag to set it stronger, so please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

#wrap .oceanwp-mobile-menu-icon a {
    font-size: 24px !important;
    line-height: 83px !important;
}

Also, I’ve improved it more. Result: https://postimg.cc/PvhRVcLV
Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools.

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

I hope that helps.

Please recheck the issue and keep us posted.
Best Regards

Hello @skalanter
Thank you for your reply. I couldn’t open the screenshot URL you gave.
I am not a coder so I don’t know much about in detail.
So the CSS I need to add be like as follows? I added like this.

.oceanwp-mobile-menu-icon a:first-child {
font-size: 25px;
}
#wrap .oceanwp-mobile-menu-icon a {
font-size: 24px !important;
line-height: 83px !important;
}

I only notice a little change which is when I added this CSS the hamburger icon pushed down just a little bit.

If I wrote wrong the code can you please beautify and give me the end code so that I can add it in true format. Because I dont know if I combine my CSS and your CSS code right or wrong.?
Best Regards and Thanks in Advance.

Hello @brs76,

I reuploaded that screenshot on another service here: https://ibb.co/sqkM4hD.

You can use only the CSS I’ve provided in the previous reply. Extra CSS is not necessary.

I set the font size to 24px, you can change it to any other size.
Also, set line height for vertical alignment. So feel free to change them.

Note: Into the “.oceanwp-mobile-menu-icon” div, there is only one tag, so these are the same:

• .oceanwp-mobile-menu-icon a:first-child
• #wrap .oceanwp-mobile-menu-icon a

And since my custom CSS in the previous reply is strong, your added CSS won’t work, so this is an extra one, and you can remove it.

If you have another custom CSS for it and those are repetitive CSS, remove them and only use one.

Best Regards

Hello @skalanter
I use the below CSS code at all of my sites after I read your answers and it looks really good to me. The Hamburger icon is really good-looking at this size.
I didn’t add any line height.
.oceanwp-mobile-menu-icon a:first-child {
font-size: 25px; !important;
}
Is this CSS code is okay?

Hello @brs76,

Yes, your custom CSS is valid, and you can use it.

Should you have any further questions, please let us know.

Best Regards

Thank you so much for your support @skalanter

You’re welcome.
I’m glad we could help.