Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #720986

    I was hoping for an updated mobile menu for a while now, because the old mobile menu function, looks and animation are not very pleasing. I think the new Burger Menu now is very nice. But i am unhappy about the limitation of usage.

    – a burger menu usually is a mobile menu per definition. The burger icon replaces menu text because of the limited screen dimensions of mobile devices (on a sidenote, it is generally difficult to use for unexperienced users also because they don’t understand the burger icon)

    – in enfold, the “new burger menu” is used as an replacement of the normal text based menu, and if the theme is used on a mobile device, it changes to the “old mobile menu”… WTF? Wouldn’t it be much more logical to replace the “old mobile menu” with the “new burger menu” (and have it on desktop sizes as well, if the user wants that?)

    – this also would provide the possability to have the “new burger menu” together with a “logo in sidebar” gerneral layout

    is there any way to achieve my whishes with changes to function / style?

    cheers, philipp

    #721733

    Hey alphabeta23,

    We are very sorry for that, however our devs are doing their best to improve the theme. For the meantime, please feel free to request – or vote if already requested – such feature on Enfold feature request form.

    Best regards,
    Nikko

    #722728

    I agree with Philip, the mobile responsive menu is dated and needs an update or at least a way to change the style.

    #722761

    hm – if this will be nice enough for you – it is only css styling of new burger menu.
    And with media-querries it works on all devices without falling back to old mobile advanced menu

    Test Page

    #722895

    Yes this would be good, how can I update to something like this?

    #723500

    Result here: Link

    /**** not showing the normal menu nor the old responsive menu  ******/
    .js_active.html_burger_menu #avia-menu > li {display: none }
    #advanced_menu_toggle {display: none !important }
    
    /**** just to have a bit more width for both - logo and toggler  ******/
    .responsive #top #wrap_all .container {
        max-width: 95%;
        width: 95%;
    }
    
    /**** styling the burger menu   ******/
    .av-burger-overlay {
        box-shadow: -2px 0 10px #bbb; 
        left: auto;   
        max-width: 400px;   
    }
    
    /**** one example to place icons infront of hamburger menu links  ******/
    #av-burger-menu-ul li#menu-item-437 a .avia-menu-text::before {
    content: "\e821 \00a0";
    font-family: entypo-fontello; 
    color: #0088BD}
    
    /**** background image to hamburger menu  ******/
    .av-burger-overlay-inner {
    background: url("/wp-content/uploads/burger-bg.jpg") no-repeat scroll 0 0 / cover ; 
    }
    
    /**** background-color for hamburger menu icon  ******/
    .av-burger-overlay-active #top .av-hamburger-inner, 
    .av-burger-overlay-active #top .av-hamburger-inner::before, 
    .av-burger-overlay-active #top .av-hamburger-inner::after    {
    background-color: #000 !important;
    }
    
    /**** search icon color in burger menu   ******/
    .av-burger-overlay-active #top #wrap_all #menu-item-search a, 
    .av-burger-overlay-active #top #wrap_all #menu-item-search a:hover {
        color: #000;
    }
    
    /**** burger menu font color   ******/
    #av-burger-menu-ul li a {
        color: #000 !important;
    }
    
    /**** burger menu text shadow - if you like  ******/
    #av-burger-menu-ul li a .avia-menu-text {
        text-shadow: 1px 1px 3px #333;
    }
    
    /**** burger menu hover state  ******/
    #av-burger-menu-ul li a:hover .avia-menu-text {
        color: #0088BD;
        font-weight: 400;
    }

    Only needed if your burger menu is not 100% width –
    for the styling of the page if burger menu is active you have to make a copy of header.php to your child-theme folder:
    look for <div id='wrap_all'> and place just after it : <div class='mega-bg'></div> so that there is :

    <div id='wrap_all'>
    <div class='mega-bg'></div>
    /**** setting up an effect on burger menu active - you have to insert the code above to header.php for that ******/
    
     .mega-bg {
        width:100%;
        height:500%;
        position:absolute;
        display:none;
        z-index:0;
        transition: all 1s linear 0;
        opacity: 0
        }  
    
     .av-burger-overlay-active .mega-bg {
        width:100%;
        height:500%;
        background:#fff;
        position:absolute;
        display:block;
        z-index:500;
        transition: all 1s linear 0;
        zoom: 1;
        filter: alpha(opacity=85);
        opacity: 0.85;
        }
    #723691

    Thanks a lot @Guenni007. Appreciate your help and time :).

    Best regards,
    Andy

    #723705

    thank you @guenni007 this looks very interesting indeed. i will try this out.
    still i will put this as a feature request and maybe at the end we will have a “solution” more than a “fix”.

    #723848

    @alphabeta23
    Glad Guenni could help you and thanks for making the feature request.
    Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Burger Menu / Mobile Menu / unconsistancy’ is closed to new replies.