Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1328924

    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?

    #1328978

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

    Best regards,
    Mike

    #1329251

    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 1 week, 3 days ago by  frankeee.
    #1329290

    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

    #1329526

    … 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 1 week, 1 day ago by  frankeee.
    #1329891

    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

    #1329903

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

    #1330228

    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

    #1330500

    … 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;
        }
    }
    #1330556

    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

    #1330613

    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 14 hours, 38 minutes ago by  frankeee.
    • This reply was modified 14 hours, 38 minutes ago by  frankeee.
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.