Megamenu content alignment / first product fix (Expanse)

[saraki]

Hi everyone

I don't know what I did but my megamenu suddenly decided to act funny.

There are two issues:

1. The bottom row of menu groups is un-clickable, they jump up to the top row when hovering. 

2. The first product of my second megamenu (COLLECTIONS) shows up blank.

Please see screen recording demo here:

https://drive.google.com/file/d/1FXESCa8aWqSlsLPDGf-pP88CCSooXPvg/view?usp=sharing

I would like for all megamenu groups to be aligned in one row when the page is wide enough, and not jump around erratically when the page is more narrow.

Please help 🙏

www.inibo.co

PW: secret

@TerenceKEANE ?

[TerenceKEANE · Accepted solution]

Hello again,

1. You can solve your issue with the following code. It seems like you've been playing around with the 'flex' part quite a bit 😊. Of course, this can be resolved one way or another. It will be a single line and will gracefully wrap to the next line when additional menu items are added without overflowing. I've tested it on my end and it seems fine. If you'd like, give it a try yourself, and if it works, I'd recommend checking other areas for conflicts. The code works on both desktop and mobile. If there are any issues on mobile, we can address them for desktop only.

1. This issue seems to be related to the back-end. If you'd like, you can strive with the software you're using. If that doesn't work, you can reach out to the theme developer. I believe you want to display the last product sold here.

.megamenu__cols {
    columns: unset!important;
    flex: 1 1 100% !important;
    display: flex!important;
    flex-direction: row!important;
    flex-wrap: wrap!important;
    gap: 20px;
}

[saraki]

@TerenceKEANE Thank you again, your code is working great :)))

Could you give me an additional line to align the columns in the center, instead of left? ..Or will that mess things up?

Also, all columns  to the right are moving because the links get bigger on hover. I tried making the gap bigger, but it still happens. Can this be fixed?

Regarding the other issue, ideally I would like to pick a product, but the theme allows only for the first product to be displayed.

I will try to contact the theme developer.

[TerenceKEANE]

Of course. Here are the codes you can use. Additionally, it would be better if you remove your used gap: 100px; value. Because it creates a large gap in the second row. That's why I'm providing you with “the column-gap” and normal gap values. You can check after you've done. But, as always, the choice is yours

.megamenu__cols {
    gap: 20px!important;
    column-gap: 50px!important;
    justify-content: center!important;
}

I noticed the issue you mentioned before, but I didn't mention it in case this format suits you better. Here are the codes below. If you add them, the enlargement issue will be resolved. There's just a slight increase due to font-weight: bold!important;. You can remove it if you don't want it. It seems a bit messy here.

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
   font-family: 'Goudy Old Style' !important;
   font-size: 15px!important;
}


.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level):hover {
    color: #000000 !important;
    font-family: 'Goudy Old Style' !important;
    font-weight: bold!important;
    font-size: unset!important;
    letter-spacing: unset!important;
    text-decoration: none !important;
}

The last issue you mentioned can also be addressed with CSS by creating a placeholder product image, I believe. But it's best to resolve this structural issue with the theme developer. Feel free to reach out if you encounter any more problems 😉

best regards,

[saraki]

Thank you @TerenceKEANE, the code to center the columns is perfect!

As for the other issue, I do actually want Avenir Next as the base and a bold Goudy Old Style on hover. This is working in the footer without moving the other columns and I was hoping to achieve the same in the megamenu.. 

Thanks again!:)

[TerenceKEANE]

You are welcome😊 The following codes will help with the other matter. The font of the menu links above will be Avanir Next. I see no issue with the hover part already.

// Delete this

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {

   font-family: 'Goudy Old Style' !important;

   font-size: 15px!important;

}

// add these

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {

   font-family: Avenir Next !important;

   font-size: 15px!important;

}

Additionally, in some places, you have added 'Goudy' instead of the Avanir Next font. Perhaps you did it knowingly or unknowingly, but the following code will globally set all fonts (not just :hover) to Avanir. Feel free to give it a try.

// it will make all font Avenir

* {
    font-family: Avenir Next !important;
}

Additionally, the top menu's sticky section loses visibility when scrolled down with the mouse. Maybe you did it intentionally, but if you add the following code, it will stay at the top consistently. Consider it a bonus. Feel free to ask if you have any questions. Whenever I find time from our own software, e-commerce, or websites, I will try to take care of your matters. Just don't forget to tag me. 😉

.header-section {
    position: sticky!important;
}

[saraki]

Hey @TerenceKEANE  Thank you for fixing the header section! I wonder when it got unstuck...🤔? Thanks for noticing!

The Goudy fonts are all intentional, so I won't need to make it Avenir site-wide 🙂

[TerenceKEANE]

If you need anything, just let me know 🙂