Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 1, 2024 at 9:20 pm #1441635
    peterolle

    I need to create a mega menu with 9 elements in 3 rows. That is 3 elements per row.
    Each element is an image at the left and a text at the right. Everything centred horizontal and vertical.

    So it is like a mini grid of 9 elements for the mega menu, everything centred.

    I tried this: https://kriesi.at/documentation/enfold/mega-menu/

    But it is confusing and then after having one of the items kind of working, I am missing the image in left, text in right and everything centred.

    What should be the correct way for this and the CSS needed to make it visually correct?

    Thank you.

    May 2, 2024 at 5:13 am #1441752
    Ismael

    Hey peterolle,

    Thank you for the inquiry.

    How did you add the images to the menu items? Please provide a test page so that we can check the current layout.

    Best regards,
    Ismael

    May 2, 2024 at 7:45 am #1441795
    peterolle

    Thank you Ismael.

    Will try to explain as I have it in local.

    
Main: Products (Use as mega menu)

- Product 1 (default product)
-- Custom URL (site url, nav lavel: -, same window, desc: <img src="https://placehold.co/100x100" alt="" />, use the desc: checked)

- Product 2 (default product)
-- Custom URL (site url, nav lavel: -, same window, desc: <img src="https://placehold.co/100x100" alt="" />, use the desc: checked)

- Product 3 (default product)
-- Custom URL (site url, nav lavel: -, same window, desc: <img src="https://placehold.co/100x100" alt="" />, use the desc: checked)

- Product 4 (default product) **This column should start a new row : checked
-- Custom URL (site url, nav lavel: -, same window, desc: <img src="https://placehold.co/100x100" alt="" />, use the desc: checked)

    And so on for the 9 products in 3 rows.

    This shows the product link and the image below.

    The idea is to have them showing the image and the text in the same line and centred with even spaces.

    May 2, 2024 at 7:55 am #1441796
    Ismael

    Hi,

    Thank you for the info.

    Try to wrap the image and the text in a container with a unique class name.

    Example:

    
<div class="av-mega-menu-custom-pt-column">
<div class="av-custom-pt-column-img"><img src="https://placehold.co/100x100" alt="" /></div>
<div class="av-custom-pt-column-content">Add text here</div>
</div>

    Then add this css code:

    .av-mega-menu-custom-pt-column {
   display: flex;
   align-items: center;
}

.av-custom-pt-column-content {
   margin-left: 10px;
}

    Best regards,
    Ismael

    May 2, 2024 at 8:32 am #1441812
    peterolle

    Thank you Ismael.

    How should I create the subitem then?

    Product category: normal menu
    Custom one: where I have description to paste the image code.

    How to have a custom one with description if the parent one is needed ?

    Thanks.

    May 2, 2024 at 11:21 am #1441864
    peterolle

    I see.

    Parent is a –
    Sub is also a –
    Then the complete thing in the description of the second one.

    Thank you Ismael, you can mark this as solved.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Centred Image and text for mega menu’ is closed to new replies.