Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 15, 2018 at 12:30 am #1009954
    Blue_Bear

    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 6 years, 2 months ago by Blue_Bear. Reason: I modified the CSS in order to apply it only to the submenu I need
    September 15, 2018 at 5:38 pm #1010188
    Mike

    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

    September 17, 2018 at 10:25 am #1010649
    Blue_Bear

    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

    September 17, 2018 at 1:27 pm #1010728
    Victoria

    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

    September 17, 2018 at 1:55 pm #1010749
    Blue_Bear

    Yes of course :

    screenshot

    Thx,

    Clément

    • This reply was modified 6 years, 2 months ago by Blue_Bear. Reason: Screenshot ongoogle drive ain't working
    September 17, 2018 at 3:19 pm #1010802
    Victoria

    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

    September 17, 2018 at 3:24 pm #1010807
    Blue_Bear

    done!

    September 17, 2018 at 6:06 pm #1010882
    Victoria

    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

    September 19, 2018 at 5:23 pm #1011934
    Blue_Bear

    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

    September 20, 2018 at 11:57 pm #1012529
    Basilis

    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

    September 24, 2018 at 4:47 pm #1013697
    Victoria

    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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Enfold mega menu stylling – image grid’ is closed to new replies.