- This topic has 21 replies, 3 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 7, 2021 at 3:21 pm #1610168nik9
Hello,
Is it possible with GP to create a mega menu exactly like this here: https://craftcan.directory/
Cheers π
January 7, 2021 at 7:02 pm #1610289ElvinStaffCustomer SupportHi,
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.
January 7, 2021 at 11:53 pm #1610458nik9Hello Elvin,
Ahh, I made a error in the CSS. Now its working. Thanks
Now regards the styling, what would be the easiest way? π
Cheers
January 8, 2021 at 12:36 am #1610489ElvinStaffCustomer SupportNow 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 nomega-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 addmega-menu-col-3
so it uses the 3 column layout.January 8, 2021 at 2:43 am #1610606nik9Very 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?
January 8, 2021 at 3:26 am #1610641ElvinStaffCustomer SupportVery 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.
January 8, 2021 at 4:16 am #1610696nik9Hello,
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); }
January 8, 2021 at 7:47 am #1611104DavidStaffCustomer SupportHi 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
January 8, 2021 at 9:07 am #1611208nik9Hi 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
January 8, 2021 at 10:02 am #1611288DavidStaffCustomer SupportTry 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
January 9, 2021 at 11:10 am #1612473nik9Thanks.
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); }
January 10, 2021 at 5:53 am #1612987DavidStaffCustomer SupportTry 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
January 10, 2021 at 7:41 am #1613218nik9Hello 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;
January 10, 2021 at 8:32 am #1613274DavidStaffCustomer SupportGetting 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.
January 10, 2021 at 9:12 am #1613323nik9Okey, 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 π
-
AuthorPosts
- You must be logged in to reply to this topic.