Need help in modifying burger menu icon and background

Hi,
I'm hoping you can help me. The Burger icon is very small and there doesn’t appear to be a way to make it larger in the Upfront panel.

Also, I'm unable to change the background color of the dropdown menu that appears once the burger icon is clicked.

  • Luís

    Hi Kimberly Cohen ,

    Hope you're doing well today!

    Those changes needs to be done via CSS, so, can you try add this code in the left panel -> Theme Settings -> Global Theme CSS:

    /* change burger menu icon size */
    div.responsive_nav_toggler {
        height: 50px;
        padding-left: 17px;
        padding-top: 19px;
        width: 50px;
    }
    
    /* change menu background color */
    div[data-style="burger"] .menu {
        background-color: white !important;
    }

    Regarding to the burger menu icon, I increased the size from 34px to 50px, you can change these values, however, you need to make some changes in the "padding" too, in order to center the 3 lines inside.

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • Kimberly Cohen

    Hi Luis,
    Thank you for your response and for the code. I followed your instructions and added it to Theme Settings -> Global Theme CSS in regular mode; then clicked Save. I then clicked Responsive Mode; selected Mobile to see if the changes had taken, but they hadn't. (See Att'd)

    Then I began the process again. This time, before making any changes to the Global Theme CSS, I clicked Responsive Mode, selected Mobile and then clicked the Burger Icon. I then changed the default setting by adding the code you provided; clicked Save and voila'! the changes took.

    Perhaps I misunderstood your initial instructions, but if I didn't and the changes were supposed to have occurred by just updating the Global CSS in regular mode then there may be a glitch. Please let me know and thanks again for your help!

    Sincerely,
    Kimberly

  • Luís

    Hi Kimberly Cohen ,

    Hope you're doing well today!

    Sorry for the incomplete information in my previous reply.

    If you add the code in Theme Settings -> Global Theme CSS in "regular mode", the changes will be applied only in the front-end (live site), but you will not be able to see the changes in the Upfront editor -> Responsive mode.

    To see the changes in both (Upfront editor and live site) you need to add in Responsive Mode-> Mobile -> Global Theme CSS, as you mentioned.

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.