Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 3, 2017 at 1:52 pm #728989
    EvilMuelli

    On http://kriesi.at/themes/enfold-creative-studio/ you’re using a hamburger menu icon (on desktop). I would like to change this icon to a waveform: http://i.imgur.com/IlAjEsg.png
    like your Entypo Fontello icon (ue8ce). How can I do this?

    I think the problem is that you’re not using a real icon as hamburger menu icon, but CSS. Could I style the lines in a different way so I get three waves instead of three straight lines?

    Thanks a lot for your awesome work!

    January 4, 2017 at 6:14 am #729286
    Nikko

    Hey EvilMuelli,

    Try adding this css code in your Quick CSS (located in Enfold > General Styling):

    #menu-item-burger .av-hamburger:before {
    font-family: 'entypo-fontello';
    font-weight: normal;
    content: '\e8ce';
    position: absolute;
    font-size: 36px;
}

#menu-item-burger .is-active.av-hamburger:before,
#menu-item-burger span.av-hamburger-box {
    visibility: hidden;
}

#menu-item-burger .is-active span.av-hamburger-box {
    visibility: visible;
}

    Let us know if this helps :)

    Best regards,
    Nikko

    January 4, 2017 at 1:21 pm #729383
    EvilMuelli

    Awesome Nikko! works like a charm. Thanks a lot!

    January 5, 2017 at 5:03 am #729716
    Rikard

    Hi,

    Glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    June 18, 2017 at 6:10 pm #809585
    BenWorx

    Hi there,

    I added the code mentioned above to the quick css but the hamburger menu icon did not change.

    Any suggestions?

    Thanx

    June 20, 2017 at 2:17 pm #810365
    Victoria

    Hi BenWorx,

    Are you using the hamburger menu on desktop? If not, this code will not work. Could you explain a bit more what are you trying to achieve?

    Best regards,
    Victoria

    June 20, 2017 at 5:39 pm #810535
    BenWorx

    Hi Victoria,

    Am trying to change the icon for mobile.. What steps would you suggest?

    Thanx!

    Ben

    June 20, 2017 at 6:04 pm #810547
    Sarah

    Hi Ben,

    Have you tried the solutions presented here or here?

    Best regards,
    Sarah

    October 26, 2018 at 10:19 pm #1026950
    birte5

    Hello,
    I would like to use a png instead of the 3 lines, for mobile and desktop. I got it to work for mobile, using this code:

    .av-hamburger::before {
    content: url(http://www.backspace-la.com/wp-content/uploads/2018/10/backspace55X55.png);
    display: block;
    padding-top: 5px;
    }
    .av-hamburger-inner {display:none!important;}

    I tried this for the desktop, but it didn’t work.

    #advanced_menu_toggle:after {
    content: url(http://www.backspace-la.com/wp-content/uploads/2018/10/backspace55X55.png);
    display: block;
    padding-top: 5px;
    }
    I have tried different solutions that I found in the forum, changing the functions.php etc, but nothing worked.
    Can you please help?

    October 26, 2018 at 10:47 pm #1026955
    birte5

    Hello,
    I just saw that it actually works, but I can’t change the size. I used a slightly bigger png for the desktop and added more top padding, but it’s still very small. How can I get it bigger on the desktop?

    Thanks,
    Birte

    October 29, 2018 at 9:10 am #1027406
    Nikko

    Hi Birte,

    I can see this code:

    .av-hamburger::before {
    content: url(//www.backspace-la.com/wp-content/uploads/2018/10/backspace55X55.png);
    display: block;
    padding-top: 5px;
}

    please replace the url of the image to the link in private content, it should make it look bigger.
    Hope it helps.

    Best regards,
    Nikko

    October 30, 2018 at 2:01 am #1027798
    birte5

    Thank you I got it to work!

    October 30, 2018 at 5:33 am #1027855
    Mike

    Hi,
    Glad Nikko was able to help, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.