Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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:
    http://www.zoo.ch

    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;
    }

    #1183741

    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,
    Ismael

    #1183823

    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!
    Matt

    #1184413

    Hi,

    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,
    Ismael

    #1184574

    That worked as expected.

    As always ;)

    Thanks!
    Matt

    #1184742

    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,
    Rikard

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

You must be logged in to reply to this topic.