[Resolved] Questions regarding mega menu

Home Forums Support [Resolved] Questions regarding mega menu

Home Forums Support Questions regarding mega menu

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1534806
    Rickard

    Hello!

    I have followed the mega menu instructions at this page: https://docs.generatepress.com/article/building-simple-mega-menu/

    And now I have 2 questions.

    1. Is it possible to add a small padding at the bottom of the last menu item in the mega menu?

    2. Is it possible to disable the mega menu on mobile? The reason for this is because I don’t want the mega menu headings (child items) to show. On mobile I want the original menu to show.

    Would really appreciate the help!

    Best regards,
    Rickard

    #1534854
    David
    Staff
    Customer Support

    Hi there,

    i’ll answer #2 first.
    The CSS is in that doc is wrapped inside an media query ie.

    @media (min-width: 769px) {
    
    /* All CSS here */
    
    }

    Which means it will only apply to smaller devices, ie up to 768px wide.

    #1 To add some padding to the bottom of the menu you would add this CSS:

    nav.main-navigation .main-nav .mega-menu>ul {
        padding-bottom: 20px;
    }

    Make sure it also is inside the Media Query.

    #1534913
    Rickard

    Hello!

    Thanks for the quick answer.

    1. I have added the CSS in the child themes style.css but it doesn’t seem to work. I can’t see that any padding has been added using the code you provided. And I have added it in the media query.

    2. I’m not sure what you mean. I interpret it as you saying the mega menu only applies and is visible on mobile (devices up to 768px wide). But that shouldn’t be the case, since I want it to only show when on the computer, and not on mobile.

    I have added my website URL in the private information if you need to investigate this further.

    Best regards,
    Rickard

    #1534951
    David
    Staff
    Customer Support

    1. I made an edit to the CSS:
    https://generatepress.com/forums/topic/questions-regarding-mega-menu/#post-1534854

    2. At 768px device width the Mobile Menu is displayed, this is whether you’re on a desktop or mobile device. So we set the Mega Menu to work only on sizes above that.

    #1534969
    Rickard

    1. Perfect, now it works. Thank you!

    2. Yes that I fully understand. But if you take a look at my website using a mobile or just resizing the screen the mega menu headings (child items) becomes drop downs on that smaller screen size. And that’s not what I want, so I would like to remove them on mobile and just display the grandchild items under the parent item. Is this possible to do?

    #1535298
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Are you wanting to do something like this?:

    .main-navigation.toggled .main-nav li.mega-menu > a .dropdown-menu-toggle {
        display: none;
    }
    
    .main-navigation.toggled .main-nav li.mega-menu > .sub-menu {
        visibility: visible;
        left: auto;
        opacity: 1;
        height: auto;
        pointer-events: auto;
        position: relative;
    }
    #1535697
    Rickard

    Hello Tom!

    I added the code at the bottom of the media query, but the only thing that code seem to do is remove/shorten the top margin on the menu, site title, and logo, and just push them higher up. And I’m not that good with code so I don’t really know what that code is supposed to do.

    I’ll try and explain what I want:

    1. On the computer (or screens bigger than 768px) I want the mega menu to show (parent item -> child item -> grandchild item).

    2. On mobile (or screen smaller than 769px) I don’t want the mega menu to show (parent item -> grandchild item).

    The way it is on mobile right now is that the child item, which in my case is only used as a title for the 4 different columns, becomes a dropdown on mobile. And if possible I would like to remove that dropdown on mobile and just show the grandchild item when clicking the parent item.

    I have no idea if this is possible, and I hope you understand what my end goal is.

    #1536522
    Tom
    Lead Developer
    Lead Developer

    I believe that’s what my CSS should do. It shouldn’t need to be added to any media query either.

    Can you add it to the site so I can see why it’s not working?

    #1536534
    Rickard

    Oh okay, I thought it should be added to the media query. My bad!

    I have now added it without any media query and the problem I mentioned earlier does not occur now.

    However, there is another problem: on mobile, the parent item which has child and grandchild items are now open by default (showing the child items dropdown) and I/the user are not able to close them.

    I’ll leave the CSS on the site so you can take a look!

    #1537768
    David
    Staff
    Customer Support

    Hi there,

    the child menu items eg. Avdelning 1 should they have a link ?
    If not it may be simpler to remove the child sub menu and add those ‘headings’ as part of the next submenu. Then we can style them as headings on the Desktop only.

    #1537796
    Rickard

    Hello!

    No, the child items doesn’t need a link – they should only act as a heading for the mega menu columns on desktop.

    So your idea sounds like a good one, how would I go about doing that? 🙂

    #1537933
    Tom
    Lead Developer
    Lead Developer

    However, there is another problem: on mobile, the parent item which has child and grandchild items are now open by default (showing the child items dropdown) and I/the user are not able to close them.

    By default, those parent items would be closed by default, and you would be able to open/close them with the arrow. That’s without any of the CSS I provided.

    The CSS I provided opens them by default and removes the dropdown arrow.

    Perhaps I misunderstood the original goal – any chance you can explain a bit more?

    #1538615
    Rickard

    Hello!

    Yes Tom, what you’re saying is true – on mobile, without the CSS you provided the parent items are closed (as they should be), but the child items are also closed and still visible (and I don’t want them to be visible on mobile).

    I will try and explain a bit more what I’m trying to do:

    1. On desktop: I want the mega menu to show as it should (parent item -> child item -> grandchild item). The child item does not need a link as they should only act as a heading/title for the mega menu columns on desktop (I liked the idea that David had, but not sure how to implement that).

    The problem I’m facing only occurs on mobile, so the desktop menu works just like I want it to.

    2. On mobile: I don’t want the mega menu to show (instead it should be: parent item -> grandchild item, like a regular menu works). This means that when you click open on the parent item I want it to directly show the grandchild items, and hide the child item completely (not removing just the arrow like your CSS does). The grandchild item should become a sub menu item under the parent item, and not the child item – if that makes sense.

    The child items is only used as headings/titles for the columns on the desktop (so they don’t need a link), and so on mobile they’re not needed in my case. I don’t want to remove just the arrow of the child item; I want to remove the whole child item (or hide might be a better word, but in any case it should not be visible to the user when opening the parent item on mobile).

    I hope you guys understand a little bit more what I’m trying to do.

    #1539487
    Tom
    Lead Developer
    Lead Developer

    Got it – that’s a tough one.

    It may be better to use the Off Canvas Panel for your mobile menu: https://docs.generatepress.com/article/off-canvas-panel-overview/

    This way you can build a custom menu for mobile without the extra parent items.

    #1545960
    Rickard

    Thanks Tom, I decided to go with the Off Canvas Panel for the mobile menu.

    Is it possible to make it so when the user click the parent item on the off canvas panel the dropdown opens (instead on the user being sent to the parent item URL)?

    Right now, when the user click the parent item they are sent to the URL of that parent item, and in order to show the child/sub menu items they need to click on the little arrow to the right – and I don’t want it that way, so would be great if it’s possible to change to the above.

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