Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #955058

    Hi

    For the url below, on desktop, when reducing browser width the mobile menu displays correctly and the background transparency disappears correctly.

    However from around 990 – 766 wide, the hamburger menu background is dark grey instead of the blue #668fa4 set in General Styling (plus the icon is white instead of orange #efab86). Width less than 766 is correct though.

    Running latest WordPress 4.95 and Enfold 4.3.1

    Thanks

    #955552

    Hey pantoni,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 990px) {
    #top #wrap_all .av_header_transparency {
        background-color: #668fa4 !important;
        color: #ffffff !important;
        border-color: #668fa4 !important;
    }
    #top .header_color .av-hamburger-inner {
        background-color: #eeab86 !important;
    }
    }

    Best regards,
    Rikard

    #955561

    Thanks Rickard, that worked.

    I could only get it to work in the Quick CSS panel, not the Child Theme CSS for some reason?

    Just one small issue, when clicking the hamburger icon, when it displays as an X icon, the color is displaying both orange and white, instead of just white.

    Thanks

    • This reply was modified 1 week, 6 days ago by  pantoni.
    #955744

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .header_color .av-hamburger.is-active .av-hamburger-inner {
        background-color: #fff !important;
    }
    

    Best regards,
    Vinay

    #955925

    Hi Vinay
    Thanks that fixed the double color of the X icon. However there’s still a double up of color on the hamburger icon – middle line.
    cheers

    #955967

    Hi,

    Thanks for the feedback. Please try removing this part of the CSS I gave you:

    #top .header_color .av-hamburger-inner {
        background-color: #eeab86 !important;
    }

    Or replace it with this:

    #top .header_color .av-hamburger-inner {
        background-color: #fff !important;
    }

    Best regards,
    Rikard

    #955985

    Thanks Rikard
    All good now.

    I know this should be a separate thread, but can you advise the css to increase the mobile menu font size?
    cheers

    #956160

    Hi!

    Please feel free to change the font size value to suit your design and add it to your site to increase the font size.

    @media only screen and (max-width: 990px) {
    /* Mobile menu item */
    #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, 
    {
        font-size: 30px;
    }
    /* Submenu */
    #top #wrap_all .av_header_transparency .sub_menu > ul > li > a {
        font-size: 22px;
    }}

    Best regards,
    Vinay

    #956300

    Hi Vinay
    I’ve added that, cleared cache but no changes in size using 40.

    cheers

    #956429

    Hi,

    Please try this instead:

    @media only screen and (max-width: 990px) {
    #av-burger-menu-ul .avia-menu-text {
      font-size: 30px !important;
    }
    }

    Best regards,
    Rikard

    #956780

    Brilliant – that works, thank you.

    #957297

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #957466

    All good to close thank you.

    #957967

    Hi,

    Thanks for the feedback. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Hamburger menu icon and background is incorrect color’ is closed to new replies.