Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #650248

    Hi Enfold Support,

    I would like to organize the sub submenu (menu level) in column rather than one item below the other. I’ve set up picture instead of text in the sub submenu (see image below) and would like to display them like a fixed gallery.

    capture d'ecran

    Is there any CSS for that ? Or should I try with plugin like ubermenu or heromenu ?

    Thanks in advance,


    ps: If you need it i give you an acces to my website in the private content.


    Hey Blue_Bear!

    Please take a look here

    how to use a Mega Menu with Enfold.

    Please do let us know if we can do anything else for you

    Best regards,


    Hi Basilis,

    Thanks for the link but I’ve seen it before and there is no explication for I want to do. I used it to set up what you see on the picture above but I want to go further that why I ask for help.

    Best regards,



    Hi again,

    Just to say that I’ve found a solution, not an elegant one but it’s working :)

    I’ve just put my html code into the “description” area and check “Use the description to create a Text Block.”.

    If you don’t have other solution more “elegant” please consider that the topic can be close.

    Thanks a lot, cheers,



    Just to let you see the result :
    capture decran

    Now I wonder if I can set upthe width of the submenu to display more than 3 column by category… I’ll look for that !



    We need to see the actual page because we have to inspect it. What is the code that you use in the description field?

    Best regards,


    Hi Ismael,

    I use this html code for the left column :

    <br />
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#creationsvalerbijoux">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Img-crea-valer-menu-01.png" div class="intro2"; alt="Les Créations Valer"; style="width:128px; height:64px" />
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#dinvanh">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Dinh-Van-logo-noir-WEB.png" div class="intro2"; alt="Dinh Van"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#degrisogono">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/De-Grisogono-logo-WEB.png" div class="intro2"; alt="De Grisogono"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#jaegerlecoultre">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo-Jaegger-LecoultreWEB.png" div class="intro2"; alt="Jaegger Lecoultre"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#chaumet">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chaumet_logo-bijouterie-WEB.png" div class="intro2"; alt="Chaumet"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#hublot">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo-Hublot-WEB.png" div class="intro2"; alt="Hublot"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#messika">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Messika-Logo-WEB.png" div class="intro2"; alt="Messika"; style="width:86x; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/bijouterie/#chopard">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chopard-vector-logoNB-WEB.png" div class="intro2"; alt="Chopard"; style="width:86px; height:64px" />

    This code for the right column :

    <br />
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#creationsvalerhorlogerie">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Img-crea-valer-menu-02.png" div class="intro"; alt="Les Créations Valer"; style="width:128px; height:64px" />
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#zenith">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Logo_Zenith-WEB.png" div class="intro"; alt="Zenith"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#chaumet">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chaumet_logo-horlogerieWEB.png" div class="intro"; alt="Chaumet"; style="width:86px; height:64px" /></a>  
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#jaegerlecoultre">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/Jaeger-lecoultre-logoWEB.png" div class="intro"; alt="Jaeger Lecoultre"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#chopard">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/chopard-vector-logo_WEB.png" div class="intro"; alt="Chopard"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#breitling">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/breitling-vectorWEB.png" div class="intro"; alt="Breitling"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#omega">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/omega-logo-WEB.png" div class="intro"; alt="Omega"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#hermes">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/logo-hermes-2-WEB.png" div class="intro"; alt="Hermes"; style="width:86px; height:64px" /></a>
    <a href="http://www.bijouterie-valer.fr/lesmarques/horlogerie/#tagheuer">
    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/logo-tag-heuer-WEB.png" div class="intro"; alt="Tag Heuer"; style="width:86px; height:64px" /></a>

    And I’ve put this CSS code in my style.css child theme to make a class (I still hesitate between the class “intro” or “intro2”:) :

    .intro {
    .intro:hover {
    .intro2 {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    .intro2:hover {
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
       -o-transform: scale(1.1);
       transform: scale(1.1);

    Do you need more information ?

    Thanks !

    Best regards,


    • This reply was modified 8 years, 1 month ago by Blue_Bear.


    Do you want to add another column of images? Have you tried to adjust the inline width property of the images?

    <img src="http://www.bijouterie-valer.fr/wp-content/uploads/2016/06/logo-tag-heuer-WEB.png" div class="intro"; alt="Tag Heuer"; style="width:86px; height:64px" /></a>

    It is currently set to 86px.

    Best regards,



    Yes I thought about that but prefer changing the max width of the submenu in order to allow more images to show on one line rather than put smaller images.

    You can consider that topic close.

    Once again thanks for your help enfold team !

    Best regards,


Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Make Column in sub submenu (megamenu)’ is closed to new replies.