Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • September 12, 2016 at 6:10 pm #685298
    pako69

    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

    September 12, 2016 at 9:07 pm #685362
    Yigit

    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

    September 12, 2016 at 9:40 pm #685380
    pako69

    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

    September 12, 2016 at 10:34 pm #685398
    Yigit

    Hi!

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

    Best regards,
    Yigit

    September 12, 2016 at 10:38 pm #685405
    pako69

    Ok but keep it private please

    September 12, 2016 at 10:40 pm #685406
    Yigit

    Hey!

    Please try adding !import rule to first code as following 

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

    Regards,
    Yigit

    September 12, 2016 at 10:45 pm #685407
    pako69

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

    September 13, 2016 at 12:30 am #685430
    Guenni007

    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; 
}
}
    September 13, 2016 at 12:53 am #685439
    pako69

    @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

    September 13, 2016 at 7:52 am #685557
    Guenni007

    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?

    September 13, 2016 at 8:20 am #685570
    Guenni007

    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;
}
}
    September 13, 2016 at 8:30 am #685578
    pako69

    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 :)

    September 13, 2016 at 8:41 am #685580
    Guenni007

    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

    September 13, 2016 at 8:47 am #685582
    pako69

    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?

    September 13, 2016 at 8:50 am #685583
    Guenni007

    :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 8 years, 3 months ago by Guenni007.
    September 13, 2016 at 9:10 am #685590
    Guenni007

    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

    September 13, 2016 at 10:05 am #685616
    Michael Oeser

    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.

    September 13, 2016 at 10:09 am #685618
    pako69

    @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…

    September 13, 2016 at 11:35 am #685648
    Guenni007

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

    September 13, 2016 at 12:38 pm #685694
    Yigit

    Hi,

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

    Best regards,
    Yigit

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