Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1440680

    You do not need to decide it on dashboard – menu how the mega div will look like.
    (“this column should start a new row”)
    You can handle the mega div to show as grid layout.

    if you have to decide it for different mega-divs you had to differ via the parent menu item id ( e.g.: #menu-item-123 or a count number set on avia_mega_div e.g: .avia_mega_div.avia_mega1 )

    i got on my test page a mega menu with 5 columns – so i set it to:

    #top  .avia_mega_div > .sub-menu {
      display: grid !important;
      margin:0;
      gap: 20px 0px;
      grid-auto-flow:row;
      grid-template-columns: repeat(5, 1fr);  /*** that means 5 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 ***/
    }

    now for responsive behavior set some media queries:

    @media only screen and (min-width: 990px)  and (max-width: 1199px) {
      #top #header .avia_mega_div > .sub-menu {
        grid-template-columns:repeat(3, 1fr);  /*** now 3 grid-cells - grid-auto-flow: row will make a new row ***/
      }
    
    /*** i want to center the second row - so i shift 4th, and 5th column***/
      #top #header .avia_mega_div > .sub-menu > li:nth-of-type(n+4) {
        display: block;
        position: relative;
        left: 50%; /**** if you have a column-gap between the cells - then your had to calculate a correction - half the gap-size  ****/
      }
      #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 ***/
      }
    } 

    result –
    on top 5 columns besides each other
    on bottom between 990px and 1199px

    #1440681

    PS :

    repeat(5, 1fr) – is a short form of 1fr 1fr 1fr 1fr 1fr
    if you need for one column a bit more place you can do that: 1fr 1fr 1fr 1.3fr 1fr ;)

    _______
    i used on that installation the nice snippet from Ismael ( link ) to place the post-thumbnails besides the menu-items.

    function avf_wp_nav_menu_objects($sorted_menu_objects, $args) {
        // check menu name
        if ($args->menu->name != 'hauptmenue') return $sorted_menu_objects;
        foreach ($sorted_menu_objects as $menu_object) {
    
            if ( in_array($menu_object->object, array('post', 'page', 'portfolio')) ) {
                $menu_object->title = has_post_thumbnail($menu_object->object_id) ? $menu_object->title . get_the_post_thumbnail($menu_object->object_id, 'thumbnail') : $menu_object->title;
            }
        }
        return $sorted_menu_objects;
    }	
    add_filter('wp_nav_menu_objects', 'avf_wp_nav_menu_objects', 10, 2);

    a bit of css is needed then for dimension and placement.

    #1440715

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

    #1467068

    sorry – delete this here – trying to answer to a different topic

    • This reply was modified 2 weeks, 6 days ago by Guenni007.
    • This reply was modified 2 weeks, 6 days ago by Guenni007.
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.