Hamburger Icon Size on desktop

  • Hi,

    I’ve scoured the forum for an answer, but the two answers I could find did not work in my case.

    I have created a custom header for my new website, which uses a hamburger icon across all devices. It turns out impossibly small on desktop however. I want the icon to display larger. As most visitors to this website still use desktop, it is not a problem if the icon becomes a bit large on mobile too.

    Have been trying to locate the correct CSS to add to the navigation settings but can’t find any that work… Can this be resolved without using a third-party plugin? I’m working in WP2024.

    Thanks loads, Mirjam

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @mirages,

    Hope you doing well today.

    As most visitors to this website still use desktop, it is not a problem if the icon becomes a bit large on mobile too.

    You need to increase the size of the hamburger menu icon. Am I right? I will provide you with a CSS code to do it right away. Paste it on Appearance → Customize → Additional CSS and hit the ‘Save’ button.

    .wp-block-navigation__responsive-container-open svg {
        fill: currentColor;
        display: block;
        height: 35px;
        pointer-events: none;
        width: 35px;
    }

    You can replace the height and width properties of the code with the size you want to be live. Let me know how it goes. Don’t hesitate to ask further questions if something went wrong.

    Cheers,
    Muhammed Jazeel

    Thread Starter mirages

    (@mirages)

    Thank you very much for your reply, but still no luck.

    I was beginning to think I’m putting the code in the wrong place. So I have tried both your option (Appearance, customize, add CSS) and I have also tried the following:

    I go to editor and into the header and select navigation from the list view.
    On the right hand-side in Block I select the wheel and scroll down to ‘additional CSS’ to add CSS.

    When this didn’t work I tried putting the code higher up in the hierarchy, in the group that defines the entire header.

    Still nothing changes to the size of the icon. I have tried with with and height at 60 and 80 as well…

    If you have any other ideas? Again, I’m working in the 2024 version of WP.

    Thanks again!

    Thread Starter mirages

    (@mirages)

    AHHHH I have found it (in another thread)!

    It needs to go into appearance > customizer > extra CSS

    and the code is:

    button.wp-block-navigation__responsive-container-open svg {

    width: 50px;

    height: 50px;

    }

    VERY happy now ??

    Hi @mirages,

    I directed you to the same solution. I am happy to know that you found a workaround.

    Cheers,
    Muhammed Jazeel

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.