-
AuthorPosts
-
September 15, 2018 at 12:30 am #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.
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, 3 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 #1010188Hey 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,
MikeSeptember 17, 2018 at 10:25 am #1010649Hi 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 #1010728Hi 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,
VictoriaSeptember 17, 2018 at 1:55 pm #1010749Yes of course :
Thx,
Clément
- This reply was modified 6 years, 3 months ago by Blue_Bear. Reason: Screenshot ongoogle drive ain't working
September 17, 2018 at 3:19 pm #1010802Hi 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,
VictoriaSeptember 17, 2018 at 3:24 pm #1010807done!
September 17, 2018 at 6:06 pm #1010882Hi Clément,
I put the code in quick css for you, please check, if this is the way you want it.
Best regards,
VictoriaSeptember 19, 2018 at 5:23 pm #1011934Hi 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 bestSeptember 20, 2018 at 11:57 pm #1012529Hi,
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,
BasilisSeptember 24, 2018 at 4:47 pm #1013697Hi 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 -
AuthorPosts
- The topic ‘Enfold mega menu stylling – image grid’ is closed to new replies.