Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 14, 2021 at 12:13 pm #1328924
    frankeee

    I have a menu of which 2 menu items are displayed as a mega menu.

    Menu item # 1 has 4 columns and the mega menu is displayed across the entire width of the page – good!
    Menu item # 2 has 2 columns and is not displayed over the entire width of the page – bad!

    Question: How can I adjust the column width so that menu item # 2 is also displayed over the entire width of the page?

    November 14, 2021 at 10:18 pm #1328978
    Mike

    Hey frankeee,
    Can you link to the menu so we can examine.

    Best regards,
    Mike

    November 16, 2021 at 6:21 pm #1329251
    frankeee

    Hi Mike,
    You will find Login credientials in private data.

    What I want to achieve is:
    The mega menu of the menu item “Reiseauskunft” (far right) should be the same size as the mega menu of the first menu item.

    • This reply was modified 3 years, 1 month ago by frankeee.
    November 17, 2021 at 2:08 am #1329290
    Ismael

    Hi,

    Thank you for the info.

    You can use this css code to adjust the mega menu container under the menu item “Reiseauskunft”.

    #menu-item-581 .avia_mega_div {
    width: calc(100vw - 100px) !important;
    right: -50px !important;
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    November 18, 2021 at 3:19 pm #1329526
    frankeee

    … thanks very much!
    Without right: -50px! Important; it works quite well up to a page width of 1280px. From a page width of 1281px, the menu is no longer in the middle and sticks to the left side.

    • This reply was modified 3 years, 1 month ago by frankeee.
    November 22, 2021 at 6:16 am #1329891
    Ismael

    Hi,

    Thank you for the update.

    Would you mind providing a screenshot? This is how the mega menu container looks on our end.

    Screenshot: https://imgur.com/ihQNu4B

    We could use css media queries to adjust the position of the container on different screen sizes.

    Example: 

    @media only screen and (max-width: 1280px) {
    #menu-item-581 .avia_mega_div {
        width: 100vw !important;
        right: -50px!important;
        left: auto !important;
    }
}

    Best regards,
    Ismael

    November 22, 2021 at 9:54 am #1329903
    frankeee

    … yes gladly:https://snipboard.io/Xl7PeS.jpg
    … the problem shows up from a width of 1280px

    November 24, 2021 at 4:46 am #1330228
    Ismael

    Hi,

    Thank you for the screenshot.

    Did you try the css code above? It should adjust the width and position of the mega menu container when the screen width is equal or less than 1280px.

    Best regards,
    Ismael

    November 25, 2021 at 4:35 pm #1330500
    frankeee

    … yes!
    I use the CSS according to your specifications only without “right: -50px”, because with less than 1280px it leads to wrong positions. This is my css:

    #menu-item-581 .avia_mega_div {
    width: calc(100vw - 100px) !important;
}
@media only screen and (min-width: 1280px) {
    #menu-item-581 .avia_mega_div {
        width: 100vw !important;
        right: -50px!important;
        left: auto !important;
    }
}
    November 26, 2021 at 8:21 am #1330556
    Ismael

    Hi,

    Thank you for the update.

    We adjusted the css code in the style.css file a bit. Please make sure to purge the cache before checking the page. This is the new css code. 

    
#menu-item-581 .avia_mega_div {
    width: calc(100vw - 100px) !important;
}

@media only screen and (min-width: 1280px) {
	#menu-item-581 .avia_mega_div {
		width: calc(100vw) !important;
		right: -115px !important;
		left: auto !important;
	}
}

#menu-item-581 .mega_menu_title {
    display: none;
}

    Best regards,
    Ismael

    November 26, 2021 at 5:06 pm #1330613
    frankeee

    sorry Ismael, but your modified code has no effect. It’s still the same problem as here: https://snipboard.io/Xl7PeS.jpg

    – cache is purged – several times
    – CSS compression is deaktivated
    – checked with Crome and Safari

    • This reply was modified 3 years ago by frankeee.
    November 29, 2021 at 3:52 am #1330766
    Ismael

    Hi,

    Thank you for the screenshot.

    What is the actual screen resolution of your monitor? This is how it looks on our end when browser viewport is less than 1280px.

    Screenshot: https://imgur.com/0RlkPDa

    You might want to consider adding the form as an inline popup instead.

    // https://kriesi.at/support/topic/contact-form-popup-3/#post-992715

    Best regards,
    Ismael

    November 30, 2021 at 1:34 pm #1330996
    frankeee

    Hi Ismael.

    to your question:
    You can see the screen resolution in my previous post: https://kriesi.at/support/topic/adjust-the-column-width-of-mega-menu/#post-1329903
    … see attached image

    in memory of:
    The problem shows up from 1280px. In viewport less than 1280px it is fine.

    ? “You might want to consider adding the form as an inline popup instead.” ?
    I don’t know what you mean by that? What does this have to do with the position of the mega menu?

    December 1, 2021 at 10:34 am #1331103
    Ismael

    Hi,

    Thank you for the info.

    We cannot reproduce the issue on 1280px or larger screens. Please check the screenshot below.

    Screenshot: https://imgur.com/5ySVOBQ

    If you want to adjust the width of the container a bit and not make it fullwidth, please look for this code inside the css media query.

    #menu-item-581 .avia_mega_div {
		width: calc(100vw) !important;
		right: -115px !important;
		left: auto !important;
	}

    Adjust the width and right position value or replace the code with this one.

    #menu-item-581 .avia_mega_div {
    width: calc(100vw – 100px) !important;
    right: -70px !important;
    left: auto !important;
}

    Best regards,
    Ismael

    December 3, 2021 at 3:50 pm #1331475
    frankeee

    This will do the trick for me:
    @media only screen and (min-width: 1280px) {
    #menu-item-581 .avia_mega_div {
    width: 1210px!important;
    }
    }
    … it´s the width of twelve units – quite simple ;-)
    Thanks for your help! You can close the thread.

    December 4, 2021 at 12:49 pm #1331534
    Mike

    Hi,
    Glad Ismael could help, 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 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Adjust the column width of Mega Menu’ is closed to new replies.