Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 10, 2020 at 3:25 pm #1183092
    sftsengineering

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

    February 12, 2020 at 4:43 am #1183741
    Ismael

    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

    February 12, 2020 at 11:12 am #1183823
    sftsengineering

    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

    February 14, 2020 at 7:30 am #1184413
    Ismael

    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

    February 14, 2020 at 5:28 pm #1184574
    sftsengineering

    That worked as expected.

    As always ;)

    Thanks!
    Matt

    February 15, 2020 at 3:02 pm #1184742
    Rikard

    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

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