Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 25, 2024 at 10:52 pm #1432078
    Eleina_Shinn

    Hi,

    I have a Mega Menu with 5 Sub-Menu Items, but the five items are to the left of dropdown mega-menu, leaving a large space to the right instead of taking up the whole space, almost as if Enfold thinks there is a 6th item. I’ve tried all of the CSS from prior sites when I’ve accomplished this to no avail.

    This is my new site, which has a coming soon page up, so I am providing a bypass link:
    https://sunrisesanctuary.life/bypass

    I’m trying to get it to look like another site where I’ve accomplished the same thing (with your help): https://balsamtours.com/ – Mega Menu under TOURS.
    In that site I used custom css to fix and even out the mega menu columns, but the same code does not work on this site (only one item appears if I try it).

    I appreciate your help and will provide WP admin login credentials in private content in the event you need them.

    Thank you!

    January 28, 2024 at 9:59 pm #1432309
    Mike

    Hey Eleina,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #header .twelve.units {
    width: 1450px!important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    January 29, 2024 at 7:15 pm #1432414
    Eleina_Shinn

    Thanks Mike, that worked great!

    I was wondering though, is there any way to make it full-width like the header, so it’s larger and takes the full width of the screen you’re on? It seems kind of small, so less visually appealing than ones I’ve created in the past. Let me know what you think.

    January 30, 2024 at 6:10 am #1432443
    Ismael

    Hi,

    Thank you for the update.

    We could adjust the css a bit to make the mega menu container fullwidth.

    #header .twelve.units {
    width: 100vw !important;
    right: calc(-24vw - 10px) !important;
}

    You may need add a few css media queries to adjust the values on different screen sizes.

    Best regards,
    Ismael

    January 30, 2024 at 4:22 pm #1432510
    Eleina_Shinn

    Hi Ismael,

    Although that made te mega menu take up more space, it’s leaning to the right instead of centered and it leaves a big white space on the right, so the 5 columns in the mega menu are not taking up all of the available space. It doesn’t look really nice the way mega menus typically do.

    Thank you for your help, as always!

    February 3, 2024 at 7:58 pm #1432891
    Mike

    Hi,
    Thanks for your patience, it looks like your menu layout has changed since we last looked at it and we don’t have access to the backend, have you changed your plans?
    Going back to the megamenu width for five items, I don’t think there will be a good solution for this because the css flex is used, you would be better off adding a sixth item which shows at full width, than to force five items into full width.

    Best regards,
    Mike

    February 28, 2024 at 2:41 pm #1435752
    Eleina_Shinn

    Hi Mike,

    You’re right, I had to finish the site for the client, so I decided to go a different direction. Thank you so much for all of your help, I much appreciate all of you!

    February 28, 2024 at 6:21 pm #1435783
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mega Menu with Images – Not Fullwidth & Leaving Empty Space’ is closed to new replies.