Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 23, 2023 at 12:34 pm #1416949
    Aviatist

    Hello dear Enfoldteam,
    I would like to have the submenu of the main menu in full width. Unfortunately I have problems with different resolutions…. Can you give me a tip?

    Basically all submenus of the main menu on the desktop should be in full width.

    Greetings,
    Flo

    August 23, 2023 at 6:08 pm #1416979
    Mike

    Hey Aviatist,
    Please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    August 24, 2023 at 12:05 pm #1417042
    Aviatist

    Hello Mike,
    Thank you very much for your feedback. There are more details in the private content. The result should be similar to the one you can see on this page: https://www.freizeitpark.by/.

    Kind regards, Flo

    August 24, 2023 at 6:36 pm #1417083
    Mike

    Hi,
    Thanks for the link to your site but there are no sub-menu items in your menu. The example page looks like a mega menu, have you tried this option?
    Enfold_Support_3051.jpeg
    Please see our mega menu documentation for more information.
    After you enable the mega menu and add some sub-menu items, you may find the mega menu is not 100% full width, I believe we can help further then.

    Best regards,
    Mike

    August 25, 2023 at 10:14 pm #1417171
    Aviatist

    Hello Mike,
    Thanks for your feedback. I have added a mega menu again. We are currently working on the site and my colleague has removed the menu again…. Sorry for the confusion.

    The goal is for the Mega Menu to get a 100% width and be responsive on all major resolutions.

    August 26, 2023 at 3:22 pm #1417191
    Mike

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

    @media only screen and (min-width: 990px) { 
#header .avia_mega_div.six.units {
	width: 100vw;
	right: unset !important;
	left: -58vw;
}
}

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

    Best regards,
    Mike

    August 26, 2023 at 3:58 pm #1417195
    Aviatist

    Hello Mike,
    I tried this approach too, but on different resolutions the menu moves out of view. See screenshot – 1520px width.

    August 26, 2023 at 4:14 pm #1417197
    Mike

    Hi,
    Thanks for the screenshot, you will need to add css media queries for some of the key screen widths, try using the above code as a base and change the left: -58vw; to suit.
    You can add min and max for a media query like this:

    @media only screen and (min-width: 990px) and (max-width: 1024px) { 
/* code here */
}

    Best regards,
    Mike

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