Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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,

    Clément

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

    #650263

    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,
    Basilis

    #650770

    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,

    Clément

    #650878

    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,

    Blue_bear

    #650945

    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 !

    #651848

    Hi,

    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,
    Ismael

    #652035

    Hi Ismael,

    I use this html code for the left column :

    <br />
    <center>
    <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" />
    </center>
    </a>
    
    <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" />
    </a>

    This code for the right column :

    <br />
    <center>
    <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" />
    </center>
    </a>
    <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 {
        opacity:0.3;
    }
    .intro:hover {
       opacity:1;
    }
    
    .intro2 {
        opacity:0.3;
        -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 {
       opacity:1;
       -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,

    Clement

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

    Hi,

    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,
    Ismael

    #653047

    Hi,

    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,

    Clement

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