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

    Hi Enfold Team !

    I try to make an image grid inside the mega-menu. I succed to do something but it needs a lot of CSS and it’s not perfect..s As you can see below.
    enfold mega menu image grid test 1

    To do that I use an instead of title in menu option and I add the CSS below :

    /* /* On custom le menu avec les images */
    
    #top #header #menu-item-945 .avia_mega_div > .sub-menu.avia_mega_hr {
    	padding:0px!important;
    	margin:0px!important;
    }
    #menu-item-945 .sub-menu {
    	padding:0px!important;
    	margin:0px!important;
    }
    #top #header #menu-item-945 .avia_mega_div>.sub-menu {
        padding: 0px!important;
    }
    #top #header #menu-item-945 .avia_mega_div > .sub-menu > li {
    	padding:0px!important;
    }
    #top #header #menu-item-945 .avia_mega_div > .sub-menu > li > ul > li a {
    	 padding: 0px!important;
    }
    #header #menu-item-945 .avia_mega_div .avia_mega_menu_columns_first {
        margin-left: 50px !important;
    }
    #header #menu-item-945 .avia_mega_div {
        text-align: center;
    }

    I would like to reduce the space between column in order to make it looklike more a grid galery.

    Can you help me ?

    Thanks,
    Clément

    • This topic was modified 1 year, 1 month ago by  Blue_Bear. Reason: I modified the CSS in order to apply it only to the submenu I need
    #1010188

    Hey Blue_Bear,
    I believe I understand, Please see the screenshot in Private Content area. To achieve this, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top #header #avia-menu #menu-item-945 .avia_mega_div > .sub-menu,#top #header #avia-menu #menu-item-945 .avia_mega_div > .sub-menu.avia_mega_hr {
        width: 50% !important; 
        margin: auto !important;
    }

    Best regards,
    Mike

    #1010649

    Hi Mike,

    Thanks a lot ! It would do the trick !! Just to know, is there a way to crop the submenu width to fit to the items ?

    Best regards,

    Clément

    #1010728

    Hi Clément,

    Well, then the code given above should be removed and some different code used.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1010749

    Yes of course :

    screenshot

    Thx,

    Clément

    • This reply was modified 1 year, 1 month ago by  Blue_Bear. Reason: Screenshot ongoogle drive ain't working
    #1010802

    Hi Clément,

    https://cl.ly/14b40aeb6f85 This code does squeeze all the logos inside. Make it 90% and then we try to help you adjust it further.

    Best regards,
    Victoria

    #1010807

    done!

    #1010882

    Hi Clément,

    I put the code in quick css for you, please check, if this is the way you want it.

    Best regards,
    Victoria

    #1011934

    Hi Voctoria,

    So there is no way to make fit with % instead of a fixed width in pixel ?

    /* added by Victoria */
    #header .twelve.units {
        width: 1100px !important;
         left:  -217px !important;
    }

    If not you can consider the ticket close :)

    Thanks you anyway for your help !!!
    Enfold Support = the best

    #1012529

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

    #1013697

    Hi Blue_Bear,

    Well, it is possible I guess.

    You can try the code like this

    
    #header .twelve.units {
        width: 70vw !important;
        left: -12vw !important;
    }
    

    Best regards,
    Victoria

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Enfold mega menu stylling – image grid’ is closed to new replies.