[Resolved] Create Mega menu styling

Home Forums Support [Resolved] Create Mega menu styling

Home Forums Support Create Mega menu styling

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1610168
    nik9

    Hello,

    Is it possible with GP to create a mega menu exactly like this here: https://craftcan.directory/

    Cheers πŸ™‚

    #1610289
    Elvin
    Staff
    Customer Support

    Hi,

    I believe you’ve already seen this article on how to make mega menu?
    https://docs.generatepress.com/article/building-simple-mega-menu/

    We may need to modify the CSS a bit to match your preference once you’ve replicated the proper menu hierarchy on Appearance > Menus.

    Let us know.

    #1610458
    nik9

    Hello Elvin,

    Ahh, I made a error in the CSS. Now its working. Thanks

    Now regards the styling, what would be the easiest way? πŸ™‚

    Cheers

    #1610489
    Elvin
    Staff
    Customer Support

    Now regards the styling, what would be the easiest way? πŸ™‚

    For starters, you should determine how many columns would a particular menu item have.

    You’d have to pay attention to each of the selectors and what they do.

    Example are these ones:

        nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
            width: 50%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
            width: 33.3333%;
        }
    
        nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
            width: 20%;
        }

    Adding mega-menu-col-2 css class selector to the parent menu item will mean that its sub menu items will display in 2 columns.

    Adding mega-menu-col-5 css class selector to the parent menu item will mean that its sub menu items will display in 5 columns.

    If you observe the current mega menu you have on your site, you can see that all the parent menu items have sub menus currently display in 4 columns because that’s the default.

    If you check the menu item Mehr erfahren, even when there’s only 3 submenu items, there’s a huge space on the right because that’s where the 4th column is. This is because your mega menu parent items are set to default meaning there’s no mega-menu-col-#n class assigned to them.

    If you want Mehr erfahren to have 3 columns to match the number of submenu items it has, you’ll have to add mega-menu-col-3 so it uses the 3 column layout.

    #1610606
    nik9

    Very clear! So then I just need a way to animate the style from the menu on hover. I think this is a border and a transition delay right?

    #1610641
    Elvin
    Staff
    Customer Support

    Very clear! So then I just need a way to animate the style from the menu on hover. I think this is a border and a transition delay right?

    I’m not sure I see the border but the fade in transition is mostly transition delay of visibility: hidden to visible and opacity: 0 to 1.

    And this is most likely toggled by a script.

    #1610696
    nik9

    Hello,

    Okey. Now I have this CSS here and I get a underline but for the whole width. We want that only the word has a underline. And this underline shoudl be faded is as in the example. Is there a way to see the script from the example website to adjust this for GP?

    nav .main-nav .mega-menu > ul > li:hover > a, nav .main-nav .mega-menu > ul > li:focus > a, nav .main-nav .mega-menu > ul > li[class*="current-"] > a, nav .main-nav .mega-menu ul ul {
    
        background-image: linear-gradient(transparent calc(100% - 2px), rgba(0,0,0,1) 2px);
    }
    
    .secondary-navigation .main-nav ul ul li:hover > a, .secondary-navigation .main-nav ul ul li:focus > a, .secondary-navigation .main-nav ul ul li.sfHover > a {
    
        background-image: linear-gradient(transparent calc(100% - 2px), rgba(0,0,0,1) 2px);
    }
    #1611104
    David
    Staff
    Customer Support

    Hi there,

    you would need to wrap the Menu Label text in a span tag, you can add them automatically to the secondary navigation menu items using this PHP Snippet:

    add_filter('nav_menu_item_args', function ($args, $item, $depth) {
        if ($args->theme_location == 'secondary') {
            $title             = apply_filters('the_title', $item->title, $item->ID);
            $args->link_before = '<span>';
            $args->link_after  = '</span>';
        }
        return $args;
    }, 10, 3);

    Then instead of styling the <a> you would target the <span>. For example this:

    nav .main-nav .mega-menu > ul > li:hover > a

    becomes

    nav .main-nav .mega-menu > ul > li:hover > a span

    #1611208
    nik9

    Hi David,

    That helped! But it still looks strange when I hover on “Gechenk Ideen”. There I have a underline on a child entry when I hover on the parent. And also the size this two column layout is very big.

    Cheers

    #1611288
    David
    Staff
    Customer Support

    Try changing:

    nav .main-nav .mega-menu > ul > li:hover > a span

    to:

    nav .main-nav .mega-menu > ul > li:hover > a > span

    For the column widths you can add this CSS:

    nav .main-nav .mega-menu.mega-menu-col-2 > ul {
        width: 50%;
        left: unset !important;
    }

    include it within the media query in the mage-menu-css

    #1612473
    nik9

    Thanks.

    Now I have this CSS. Not I have the parent always underlined when I hover on a child.

    nav .main-nav .mega-menu > ul > li:hover > a > span {
    background-image: linear-gradient(transparent calc(100% - 2px), rgba(0,0,0,1) 2px);
    }
    
    .secondary-navigation .main-nav ul ul li:hover > a > span {
    background-image: linear-gradient(transparent calc(100% - 2px), rgba(0,0,0,1) 2px);
    }
    #1612987
    David
    Staff
    Customer Support

    Try moving the :hover psuedo to the <a> ie.

    nav .main-nav .mega-menu > ul > li:hover > a > span

    becomes:

    nav .main-nav .mega-menu > ul > li > a:hover > span

    #1613218
    nik9

    Hello David,

    Thanks. I also had to adjust the other CSS. with this info. Now its working. πŸ™‚

    Now, is a transition like the example page possible with CSS or is JS needed here?

    I’m trying with

        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
        transition: 0.5s ease;
    #1613274
    David
    Staff
    Customer Support

    Getting the underline to move from one element to the next requires JS, which wouldn’t work with the current method you’re applying. You can’t use JS to move an elements style, that moving underline would need to be a separate element.

    #1613323
    nik9

    Okey, so then maybe I can use border-button: solid 1px black; and use transitions there to fade in with opacity?

    I found this page here: https://stockabl.com/apply/sell/makers/

    When I check the CSS I think this is made with only CSS right? So if that would be possible, I’m very happy πŸ™‚

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