Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #854363

    Hello, I saw this website: http://www.leslunettesdemarius.com/ and i noticed that the website is realized with the template ENFOLD, then I have buyed the template, but I don’t find any option to do the header (menù, logo) like the website that i linked here.
    Is there a special option? Or I have to modify the code?



    Hey ByProgrammer,

    This was created by using the ALB elements (Fullscreen or LayerSlider) within the homepage. If you are new to Enfold, perhaps its best to start with reading the documentation to get you up an running with how things work: http://kriesi.at/documentation/enfold/

    Best regards,
    Jordan Shannon


    Hi Jordan, thank you a lor for your reply.
    Yes, I know about the LayerSlider for the images in the home page.
    I’m referring, expecially, at the header and the menù settings: do you thing that also the menù is created with the LayerSlider? Because it is the same in all the website. (you can also notice the position of the logo -> with margin-left of 50%, and i don’t see this option in the header settings of the theme).
    My best regards.



    No the menu is created as all WP menus are, however the transparency is set via the Enfold options heading panel. As for the logo, the position could be set via custom css. On some of our demos, there may be some things that can only be achieved via custom css, but the general style can be done via the native Enfold elements.

    Best regards,
    Jordan Shannon


    Okay, thanks a lot for your help.
    I will try to set the theme settings.
    My best regards.


    Shall we close this then?

    Best regards,


    it is not as simple as it seems to be – i’m missing this header option too. Logo inbetween the middle of the menu.
    and there is a bit more todo than simple css – especially if you like to have a shrinking header.



    by the way – it is a very pitty that burger-menu does not have all the options off the main-menu (classes set in menu options)
    allthough i set up the clone option of title menu


    Hello Guenni007. Thanks for your reply.
    I know that this is not as simple as it seems to be. I saw that you (to insert the logo image inbetween the middle of the menu) insered an empety space in the menu (can you say me how you insered the img tag in the menù??); another way (if you can see the demo website that I published) if to split the menù in two parts with the logo image between them (what do you think about this??).


    @guenni007 Wow great demo, I’m sure you put that in a feature request right?
    – yes the class issue in the burger menu has been addressed and will be in the next update. I don’t know when that is, but the dev team has done a ton on all of the issues.

    Best regards,


    let it open i – will post it here. But today i have to go to a 50th birthday – Tomorrow on Germany is a holiday – so i got a bit more time.

    Something on pre info:
    This is not the logo inbetween the menus – it is a manually link placed with an image on the place where i want to have it.
    i set the logo to display none on media querrie for larger screens 768 or 990.
    I do use the shrink option of the logo to calculate the img height of that link.


    the animation now is only a css transition.
    Could be easy done.



    click the images to enlarge
    first of all if you do not need the shrinking option it is not so complicated as it seems
    Insert as usual a logo to the enfold options.

    you have to go to dashboard – appearance – menus

    insert a home link. On top right of the dashboard window – there is a slide out option called “Screen Options” Press it.
    Here you have some settings. Please mark the css classes.

    If you click on those littel arrows besides the menupoints you can insert different things now:

    On Navigation label you can insert the image link now something like:
    <img src="https://url.com/logo-top.png" alt="Logo" />
    On css classes : logoimg
    You only are in the midpoint if you have odd number of menupoints.
    We now have to get rid of the logo container
    Quick css:

    .logo, .logo a { display: none }
    .logoimg img { width: auto ; max-height: 172px }
    .container.av-logo-container { position: absolute }
    .logoimg .avia-menu-fx { display: none }
    #av-burger-menu-ul li:nth-child(4) { display: none }

    the last rule is to have not the menu-point on burger menu
    you have to count what menu-point is your logo (here it is on 4th position of the menu)

    and to have the normal logo on responsive case:

    @media only screen and (max-width: 768px){
    .container.av-logo-container { position: relative }
    .logo, .logo a { display: block }

    with shrink option :

    we have to use the function avia_header_size() of avia.js
    the code to see is on pastebin: look
    download it as js file: download

    you see on line 61 (original it is 1551 on avia.js) of my code that i get rid of the not mobile option.
    i set on line 47 : navlogo = $('.logoimg img'), and
    on line 92 i added this code: navlogo.css({'maxHeight': 1.72*newH + 'px'});

    these values you can play with. I have on my testinstallation a 100px custom height of the header
    my logo is 172px hight – so my factor here is 1.72

    upload that menu_logo.js file to your child-theme js-folder (create a subfolder in childtheme called : js
    loading the script above in enfold open your functions.php via dashboard – appearance – editor and insert:

    function include_menulogo() {
       wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/menu_logo.js', array('jquery', 'avia-default'), 2, true );
    add_action( 'wp_enqueue_scripts', 'include_menulogo', 100 );

    now the “logo” of your menu shrinks on scrolling.

    • This reply was modified 1 year ago by  Guenni007.
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.