Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #685298

    Hi
    Fantastic this new burger ! :-)
    Except 2 things:
    1- On mobile view the old “burger” still exists, It’s would be great to keep the same icon
    2- Menu fake links in this new fullwidh, I mean links like :
    +PARENT MENU (link = #)
    +++ CHILD MENU LINK (link = internal link page/post or whateever you want)
    > When you click on the Fake parent menu link the whole overley disapear and we are scrolled to the top of the page: it would be great that Enfold that # is not a real link and do nothing when a user click on it, don’t you think?
    Thanks

    #685362

    Hi pako69!

    Please add following code to Quick CSS

    @media only screen and (max-width: 990px) {
    .responsive.html_mobile_menu_tablet .main_menu .avia-menu {
        display: block;
    }
    #advanced_menu_toggle { 
    display: none !important; 
    }}

    Best regards,
    Yigit

    #685380

    Hey Ygit
    The code you give just hide the menu… so what? no menu is displayed… :-(
    I would like to have the SAME menu both in desktop version and mobile, and I would like the new hambruger menu all the time

    #685398

    Hi!

    Please post the link to your page. It does work fine on my local installation :)

    Best regards,
    Yigit

    #685405

    Ok but keep it private please

    #685406

    Hey!

    Please try adding !import rule to first code as following

    .main_menu .avia-menu {
        display: block !important;
    }

    Regards,
    Yigit

    #685407

    Done.
    Now the burger menu is placed under the logo and not at the rigth side

    #685430

    try this – i decided to show the old mobile menu under 480px

    @media only screen and (min-width: 480px) and (max-width: 990px) {
    
    .js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
    .main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
    .avia-menu.av_menu_icon_beside {
        margin-right: 5px;
        padding-right: 0;
        top: -20px;
    }
    
    .responsive #header .main_menu .social_bookmarks { display: block}
    
    .responsive #top .logo {
        display: block;
        float: left;
        position: absolute;
    }
    
    div .logo {
        float: left;
    }
    
    .main_menu {
        position: absolute !important;
    }
    
    .responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
        margin-top: 25px;
        right: 0;
        width: auto;
        top: 0
    }
    
    #advanced_menu_toggle { 
    display: none !important; 
    }
    }
    #685439

    @Guenni007
    Thanks but that’s not what I want :-)
    I would like to have juste one menu style and this one is tje new burger menu… whatever/ no matter the screen size

    #685557

    if you don’t like that downlimit remove it:

    @media only screen and (max-width: 990px) { …

    but you see here what happend in the case above: http://webers-testseite.de/elegant/

    if you deleted the 480px down limit – you have to say what happens to the new menu for small screens. Where do those icons go when logo + social icons + menu icon is bigger than the screen width?

    #685570

    on that test page i did solve the mentioned above problem by making the logo smaller – but perhaps it is better to let those social bookmarks and hamburger-menu logo float left – and let it go under the logo

    @media only screen and (max-width: 480px) {
    .responsive #top #wrap_all #header_main .container {
        max-width: 95%;
        width: 95%;
    }
    .responsive .logo img {
        max-width: 200px !important;
        top: 15px;
    }
    .logo, .logo a {
        overflow: visible;
    }
    }
    #685578

    Hey @guenni007 you rock!
    What is the full CSS code you use please, I would like to test it too.
    About the networks socials icons, my preference goes to: remove them complety! I would like to hage just : the logo – the burger menu, that’all… easy?

    PS: How did you do the animated circle and icone: scanservice? Is is a new Enfold Feature or a custom code?

    Thanks :)

    #685580

    as i said let the instruction of 480px on top go away:

    
    .main_menu { top: -20px !important}
    
    @media only screen and (max-width: 990px) {
    .js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {display: block}
    .main_menu .avia-menu, #header_main_alternate, .fallback_menu {display: block}
    .avia-menu.av_menu_icon_beside {
        margin-right: 10px;
        padding-right: 0;
        top: 0;
    }
    .responsive #header .main_menu .social_bookmarks { display: block}
    .responsive #top .logo {
        display: block;
        float: left;
        position: absolute;
    }
    div .logo {
        float: left;
    }
    .main_menu {
        position: absolute !important;
    }
    .responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
        margin-top: 45px;
        right: 0;
        width: auto;
        top: 0
    }
    #advanced_menu_toggle { 
    display: none !important; 
    }
    }
    
    @media only screen and (max-width: 480px) {
    .responsive #top #wrap_all #header_main .container {
        max-width: 95%;
        width: 95%;
    }
    .responsive .logo img {
        max-width: 200px !important;
        top: 15px;
    }
    .logo, .logo a {
        overflow: visible;
    }
    }
    
    

    you have to play a bit with positioning – that was a quickly shot solution

    #685582

    Thanks a lot I’ll give a try :) And about my last question: How did you do the animated circle and icone: scanservice? Is is a new Enfold Feature or a custom code?

    #685583

    :lol :wink everything is code
    the only thing it is hard to get from a website is the php programming !
    As long as it is simple css and js you can get all out of the code infront of you!

    btw: i changed a bit the css – see test page – now it is a bit harmonic and without shifting positions

    • This reply was modified 7 years, 6 months ago by Guenni007.
    #685590

    btw. if you are using this elegant demo and have some extra pages/post not on the front-page you have to set the padding of
    .responsive #top #main – otherwise the content starts down the header

    #685616

    Just my 5 cents: It should be an selectable option in the themes options to completely hide the mobile menu if you use the burger menu. Noone should have to write custom css for this purpose. Its´just logic that you don´t use the mobile menu in case you use the burger menu anyway.

    #685618

    @Michael Oeser I totaly agree with you!
    With the help of @Guenni007 I finaly done what I expected but it’s a paine…
    I’ts been a long time that I was waiting for Enfold to give us a burger menu to replace the traditional menu), Enfold has now done just the half of the way…

    #685648

    my vote for that you have: https://kriesi.at/support/enfold-feature-requests/
    and make a request

    #685694

    Hi,

    Thanks for your help @guenni007, as usual :)
    Guys, please request the feature or vote if already requested :)

    Best regards,
    Yigit

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