[Resolved] Help with GP Mega Menu Columns

Home Forums Support [Resolved] Help with GP Mega Menu Columns

Home Forums Support Help with GP Mega Menu Columns

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1605072
    Catherine

    Hello,

    I have successfully created a simple mega menu on the client site I’m working on using the steps and CSS listed here. However, although I would like it to display in the default 4 columns, the fourth column is appearing below the first three. I will attach screenshots in the private info field to show how the menu is structured vs. how it is appearing. Is this a break point issue, or is there something I should be doing differently? Also, would I customize the background colour of the sub menu via the sitewide GP Colors settings, or via custom CSS?

    Please note that when you view the menu structure / appearance in the attached screenshots I have only applied the mega menu functionality to the first menu section (wanted to resolve this before moving on to the other sections).

    Thank you in advance for your help!

    #1605083
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site and i can provide some CSS to make those changes/fixes.

    #1605089
    Catherine

    Thanks so much for your quick reply, David. I’m working on a localhost at the moment so unfortunately can’t provide a direct link. I can wait and return to this thread once the site is live in a week or so if that works better?

    If it helps at all re: necessary CSS, I used the Dev site from the Site Library as my starting point for this site build.

    I’d also love to be able to have a thin grey line separating the columns in the simple mega menu, if that’s possible. ๐Ÿ™‚ I did see that changing the background color of the mega menu is possible through the sitewide colors settings, so please disregard that part of my initial question.

    Thanks so much.

    #1605122
    David
    Staff
    Customer Support

    Lets see what we can do ‘blind’ to fix the 4 columns.
    In the Mega Menu CSS change:

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
    }

    to:

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;    
        flex-wrap: wrap;
        display: flex;
    }

    We need to update the mega menu docs to deal with GP 3.0 that now uses flexbox … ill get on to that.

    And for the border you can try this CSS:

    nav .main-nav .mega-menu>ul>li:not(:last-child) {
        border-right: 1px solid #ccc;
    }

    The only pain here is if the Menus are different heights the borders will also be different.
    May have to leave that bit until the site is viewable to correct.

    #1605135
    Catherine

    That CSS fix worked PERFECTLY! Thank you so much. Let’s just forget the dividing lines for now as those were definitely a wishlist item rather than an essential.

    One final question: Is there a simple way to mimic the bold mega menu column headers in the mobile version of the menu?

    Thanks again.

    #1605140
    David
    Staff
    Customer Support

    Try adding this CSS:

    @media (min-width: 769px) {
        nav .main-nav .mega-menu > ul > li > a {
            font-weight: bold;
        }
    }
    #1605143
    Catherine

    That didn’t seem to change anything, unfortunately. To confirm: I added that as an entirely separate CSS snippet in the Additional CSS section (wanted to mention that in case I was supposed to update the mega menu CSS).

    #1605159
    David
    Staff
    Customer Support

    How odd ๐Ÿ™‚

    Try:

    #site-navigation .main-nav .mega-menu > ul > li > a {
        font-weight: bold !important;
    }

    If that still doesn’t work – try pasting it at the very top of the Additional CSS code

    #1605188
    Catherine

    It still doesn’t seem to work. I do have other CSS menu styling in there for main nav buttons. Not sure if that would cause a conflict? I can’t remember where exactly that code is from but the comment is “media query for nav buttons” and I obtained it from GP support or a site from the site library (can’t remember which, sorry!).

    Thanks again for all your help.

    #1605190
    David
    Staff
    Customer Support
    #1605194
    Catherine

    Thanks, David. I tried using the updated code and it still didn’t change anything, unfortunately. The column headers are only bold in the desktop version of the menu but on mobile nothing is bold.

    #1605196
    David
    Staff
    Customer Support

    Might be worth waiting until you can move the site to a live state where we can see it – then we can see whats going on

    #1605221
    Catherine

    Sounds good, David. Thanks for all your help today.

    #1605228
    David
    Staff
    Customer Support
    #1622840
    Catherine

    Hello again!

    The site I was referring to is now live (on a temporary URL). I’ll share a link in the private info box below. If you have a moment to please take a look at the mobile version of the mega menu and share any suggestions for dividing things up with some formatting on mobile that would be a huge help. Ideally I would like to have the mega menu column headers bolded or delineated somehow on mobile so that it’s easier for people to move through the navigation (since it’s so large!).

    Thank you in advance.

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