Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 1, 2016 at 7:26 pm #719376
    Jochen

    when we choose in enfold / Header / HeaderLayout / Display of menu items -> Display as icon
    this NICE Hamburger Menu appears.

    Is there a way to change the size of this element in via CSS?

    December 5, 2016 at 5:31 pm #720557
    Yigit

    Hey Jochen,

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

    .av-hamburger-box {
    width: 20px;
}

    Best regards,
    Yigit

    December 5, 2016 at 6:45 pm #720601
    Jochen

    I tried this too,

    .av-hamburger-box {
    width: 20px !important;
    height: 12px !important;
    }

    but this does only have effect on the width of div in which the hamburger-menu-symbol stays.
    Not on the symbol itself.
    With the close symbol it is working, that’s ok.

    December 6, 2016 at 10:22 am #720913
    Rikard

    Hi Jochen,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    December 6, 2016 at 1:47 pm #720981
    Jochen

    ok, you can do it like this:

    .av-hamburger-inner::before,
    .av-hamburger-inner,
    .av-hamburger-inner::after {
    background-color: black !important;
    width: 30px !important;
    height: 1px !important;
    _padding: 5px;
    }
    .av-hamburger-inner::before {
    margin: 2px 0px 0px 0px;
    }
    .av-hamburger-inner {
    margin: 0px 0px 0px 0px;
    }
    .av-hamburger-inner::after {
    margin: 0px 0px 2px 0px;
    }

    .av-hamburger–spin.is-active .av-hamburger-inner::before,
    .av-hamburger–spin.is-active .av-hamburger-inner,
    .av-hamburger–spin.is-active .av-hamburger-inner::after {
    margin: -2px 0px 0px 0px;
    background-color: red !important;
    width: 30px !important;
    height: 1px !important;
    }

    December 6, 2016 at 1:48 pm #720982
    Jochen

    this post can be closed, thank you

    December 6, 2016 at 2:17 pm #720999
    Jochen

    this works better wit the animation

    .av-hamburger-inner::before,
    .av-hamburger-inner,
    .av-hamburger-inner::after {
    background-color: black !important;
    width: 32px !important;
    height: 2px !important;
    }
    .av-hamburger-inner::before {
    top: -8px;
    }
    .av-hamburger-inner {}
    .av-hamburger-inner::after {
    bottom: -8px;
    }

    .av-hamburger–spin .av-hamburger-inner::before,
    .av-hamburger–spin .av-hamburger-inner,
    .av-hamburger–spin .av-hamburger-inner::after {
    width: 32px !important;
    height: 2px !important;
    }

    .av-hamburger–spin.is-active .av-hamburger-inner::before,
    .av-hamburger–spin.is-active .av-hamburger-inner,
    .av-hamburger–spin.is-active .av-hamburger-inner::after {
    background-color: red !important;
    }

    December 7, 2016 at 6:26 am #721364
    Rikard

    Hi,

    Great, glad you found a solution and thanks for sharing :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘menu items -> Display as icon SIZE’ is closed to new replies.