Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1183092

    Dear Enfold Team,

    i did finally manage to get the Burger Menu fixed to the left thanks to your support.

    Now i would like to get the burger itself a bit changed:
    The 3 lines are transparent but that’s not always really visible.

    Can i change the burger “icon” to a circle with the lines in there?

    An example to the idea you can find here:

    My currently used custom css:
    /* Burger Menu shift up */
    #scroll-top-link {right:125px; }
    .html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 2.3em;
    font-size: 18px;

    /* Sticky burger on mobile left */
    @media only screen and (max-width: 990px) {
    .responsive #top .av-main-nav .av-burger-menu-main {
    position: fixed;
    top: 10px;
    left: 0px;

    /* Flyout Mobile left */
    .html_av-overlay-side .av-burger-overlay-scroll {
    right: auto;
    left: 0;

    .html_av-overlay-side .av-burger-overlay-scroll {
    width: 350px;
    -webkit-transform: translateX(-350px);
    transform: translateX(-350px);

    /* Center Logo on mobile */
    .responsive #top #wrap_all #header #header_main .inner-container .logo {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    min-height: 100px;


    Hey sftsengineering,

    Thank you for the update.

    Can i change the burger “icon” to a circle with the lines in there?

    Yes, that should be possible. You can try the following css code to make the burger menu round and add a border around it.

    #top #header .av-main-nav > .av-burger-menu-main > a > .av-hamburger {
    	border: 3px solid #989da1;
    	box-sizing: content-box;
    	border-radius: 100%;
            height: 25px !important;
            line-height: 28px !important;
            overflow: hidden;
    	position: relative;
    	padding: 15px;
            top: 25px;
            width: 25px;
    .av-hamburger-box {
    	display: inline-block;
    	height: 25px !important;
    	position: relative;
            width: 25px;

    It might require a few adjustments.

    Best regards,


    Hi Ismael. That worked out great for the circle.

    Now i just need to change the circle “transparancy” a bit with a white inner background at maybe opaque 0.5 setting or the like.
    Can that be done somehow by adding a setting?

    Many thanks!



    Glad it worked!

    You can apply the background to the .av-hamburger container. Just add this property in the first css declaration above.

    background: rgba(255,255,255,.2);

    The value .2 is the opacity or transparency in case you want to adjust it.

    Best regards,


    That worked as expected.

    As always ;)



    Hi Matt,

    Great, I’m glad Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,

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

You must be logged in to reply to this topic.