Tip: responsive Mega-Div - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

April 24, 2024 at 12:10 pm #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

April 24, 2024 at 12:15 pm #1440681

Guenni007

Participant

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.

April 24, 2024 at 7:38 pm #1440715