Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #1466665

    Good morning,

    I created the mega menu on the site by ticking the mega menu option, as I show you in the photo below: https://prnt.sc/pYMPpdsD9Q1H However, I don’t like the view on the site. On the site the mega menu appears like this:
    1. https://prnt.sc/JaaS-hXn7YdK
    2. https://prnt.sc/bOVbl1yYnz6n
    In both photos you can notice that the mega menu is made up of only 6 columns, I would like that there were at least 7, furthermore as you can see, again from the photos, the distance between one item and another in the mega menu is not equidistant, for example between “CHE COS’È LA PSORIASI” and “DIAGNOSI” there is very little space, there is a lot of space, instead between “DIAGNOSI” and “LA PSORIASI È GRAVE”.

    I would also like to know if it was possible to insert images into the mega menu.

    I had tried downloading a plugin that would allow me to build a mega menu, but I don’t know if it would be the best solution.

    I await yours.
    Sincerely,
    Mariarita

    #1466688

    I forgot to tell you that from the mobile phone, so I’m not talking about the version that can be seen from the desktop, but from mobile devices and I ask you to do a test in this sense, I can’t view some menu items, such as PSORIASI or TERAPIE.

    In the sense that, from my mobile phone, if I click on the words in question – PSORIASI and/or TERAPIE – the submenu opens, I can click on the items in the submenu, but I cannot view the contents of these two pages which should be two PILLARS PAGE.

    I ask for help in this regard.
    Always sincerely,
    Mariarita

    #1466981

    Hi,
    Thanks for your patience, in this mega menu it looks like each item is a mega menu title:
    Screen Shot 2024 09 14 at 8.35.55 AM
    This is the title items with sub items:
    Screen Shot 2024 09 14 at 8.37.06 AM
    The mega menu is six columns and each column is equal width, the length of the text doesn’t change this, so if your text is very short the columns will not be closer.

    Best regards,
    Mike

    #1467033

    you do not need to pre define the place when a new row is started at mega menu!
    you can do that by setting the mega div submenu to a grid layout:

    https://kriesi.at/support/topic/tip-responsive-mega-div/

    but:

    I forgot to tell you that from the mobile phone, so I’m not talking …

    You have a normal text menu on mobile phone? …
    so it’s about the hamburger menu (a mega div with 7 columns next to each other on the cell phone is hardly recommendable)

    next:
    images besides the menu-items text could be placed by doing it manually on label input field on menu page.
    or look to the link – there is a way to have the featured images besides the menu-item link.

    #1467067

    Thank you very much for the support, but unfortunately having several items to insert in the submenu, your solution – that is to insert a grid with 5 columns – does not seem to be right for me, as when I insert your css the menu items do not appear see aligned (*see screen).

    As regards the second message sent by me, from my mobile phone, some menu items do not open for me. Could you kindly help me, remembering that I’m not an expert in CSS, but I’m learning gradually.

    https://prnt.sc/_gismH8R-OsP / https://prnt.sc/fjGD8_9Lom2B / https://prnt.sc/ESQd7r-HTpFx / https://prnt.sc/uYFUQoj6rxaE
    Thank you,
    Mariarita

    #1467072

    first : do not set on menu – that there should be a new row:

    We do this by our css !

    #1467075

    I didn’t tick that wording under any menu item * see photo.

    https://prnt.sc/uvB6KdXCvxao

    Thank you

    #1467077

    that would be new to me, that Enfold automatically sets a new row after 6 submenu items.

    Then I’m sorry, because I see that a new submenu is set in the DOM every 6 menu items. I thought you did this manually.
    ____________
    i see on Enfold code that there is a max_columns defined on class_megamenu.php and in helper-responsive-megamenu.php
    maybe a filter could help here

    #1467079

    Thank you for looking so deeply for me.
    Since I am not an expert, as I said before, I wait for assistance to tell me how and what to do specifically

    #1467080

    Yes – that discussion is now from me to the devs or mods – and my hope is that it will find a solution then for you.
    ______________
    we can have that filter :

    function change_max_columns_on_mega_div($args){
      $args['max_columns'] = 7;
      return $args;
    }
    add_filter('wp_nav_menu_args', 'change_max_columns_on_mega_div', 10, 1);

    but we had to find now a solution for the missing calculation of positioning the mega-div for that case

    #1467083

    So you’re telling me I can insert what you indicated in the Additional CSS item?

    #1467084

    on a test installation i inserted the above snippet to child-theme functions.php:

    function change_max_columns_on_mega_div($args){
      $args['max_columns'] = 7;
      return $args;
    }
    add_filter('wp_nav_menu_args', 'change_max_columns_on_mega_div', 10, 1);

    and put in addition ( due to the lack of calculation for this case in Enfold avia.js ) in my quick css:

    .avia_mega_div.avia_mega7 {
      right: calc(-100vw) !important;
      width: 95vw;
    }

    see example page on “Mega” Menu-Item : https://basis.webers-testseite.de/

    #1467086

    Thank you for the support. I’ll ask you a question that may seem stupid to you, but actually, having never worked in this case, I wouldn’t know how to do it. Where should I insert the code snippet? Or rather I found the theme’s functions.php file (see photo) but then how and where do I insert it? Can I insert it in any line of the file? Or is there an entry within WP, unknown to me, in which to insert the code string?

    https://prnt.sc/YS48hOjugKnR

    #1467087

    do you use a child-theme ?

    see here the documentation: https://kriesi.at/documentation/enfold/child-theme/

    This is my recommended use of WordPress themes. You can easily change the settings of the parent theme – and these will be retained even after updates.

    A child theme has on start ( you see the link above got a preset child-theme to download ) these three files : style.css / functions.php and a screenshot.png
    in style.css there is the info of parent theme name and how to find the template
    the functions.php is at start nearly empty ( editing that file : do not overwrite the first line )
    the png is only to have a preview on themes overview.

    A child theme is placed besides the parent theme

    #1467088

    be carefull if you install that child-theme on an existing installation!
    Enfold has on Import/Export Options : “Import Settings From Your Parent Theme”. Button –
    This generally works smoothly. The child theme then initially adopts the settings of the parent theme – including the quick css settings.

    But link above to docu can tell you more detailed

    By the way: you do not need to edit this by ftp.
    Mostly there is the opportunity to edit the child-theme functions.php via Dashboard:

    Dashboard – Appearance – theme file editor ( right side click f.e. on functions.php)

    ______________________________

    after that for that test page of mine i have in quick css:

    .avia_mega_div.avia_mega7 {
      right: calc(-100vw) !important;
      width: 95vw;
    }
    
    #top  .avia_mega_div > .sub-menu {
      display: grid !important;
      margin:0;
      gap: 20px 0px;
      grid-auto-flow:row;
      grid-template-columns: repeat(7, 1fr);  /*** that means 7 grid-cells with each 1 fraction (same size)  ***/
    }
    
    #top #header .avia_mega_div > .sub-menu > li {
      display: block !important;
      width: unset;
      position: relative;
    }
    
    #top #header .avia_mega_div {
      max-width: 100vw;  /*** if it is neccessary ***/
    }
    
    @media only screen and (min-width: 990px)  and (max-width: 1199px) {
      #top #header .avia_mega_div > .sub-menu {
        grid-template-columns:repeat(4, 1fr);  
      }
    
      #header .avia_mega_div {
        overflow-y: scroll;  /*** needed - if your mega-div height is too large for your device ***/
        max-height: calc(100vh - 200px);  /*** depends on your header height ***/
      }
    } 
    #1467089

    I don’t think I have the child version. Whoever downloaded the template sent me this zip folder and there is only the one in the photo
    https://prnt.sc/dxXFv7eqR5-A

    #1467090

    In my WP dashboard I don’t have the possibility to modify the function.php file *see photo

    https://prnt.sc/D3HlREzGOJQM

    #1467103

    Hi,

    1. You can download a child theme here.

    2. Try reaching out to your hosting provider and ask them to turn that on for you, or edit the file via FTP instead.

    Best regards,
    Rikard

    #1467113

    thats why i wrote:

    Mostly there is the opportunity to edit the child-theme functions.php via Dashboard: …

    some Providers or Security Tools hamper that Option.

    #1467114

    I proceed to modify the site, having installed the child theme. I’ll be back soon for edits

    #1467117

    by the way – you got a post.css ( maybe an inline css) that is:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
      .avia-section.av-dbfgfq-dd62c8cfe0da5cdb4e4a6575d399ef7e {
        z-index: 989;
      }
    }

    get rid of that setting

    and a :

    header {
      max-width: 100%;
      height: 150px;
      padding: 30px;
      filter: blur(0px);
      -webkit-filter: blur(0px);
    }

    get rid of that filter ( both )

    then you can see your hamburger again

    #1467118

    Oh, thank you so much.

    #1467121

    Hi,
    Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Mega Menu’ is closed to new replies.