-
AuthorPosts
-
March 6, 2016 at 2:00 pm #593913
Hello!
I’m building my website based on Enfold Construction Demo. Page “service” has a column on the left side for quick navigation between them (circled). Here is a picture:
Is there a possibility to have a thumbnail pictures (different for each one ) pop-up when cursor is on either one of the listed services ?
Thanks!
March 7, 2016 at 3:47 pm #594377Hey Ivne!
please use the below CSS in Enfold > General Styling > Quick CSS
Change the background image link and add more nth-child(X) if you have more menu items.
.nested_nav .page_item a:hover::after{ position:absolute; z-index:100000; left:0px; top:50%; transform:translateY(-50%); } .nested_nav .page_item:nth-child(1) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .nested_nav .page_item:nth-child(2) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .nested_nav .page_item:nth-child(3) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .nested_nav .page_item:nth-child(4) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); }
Regards,
Vinay KashyapJune 10, 2016 at 7:26 am #646064Hello,
How do I create the same in menus and sub-menus?
Thanks!June 12, 2016 at 12:54 pm #646895Hi,
Can you post the link to your website please?
Regards,
JosueJune 28, 2016 at 6:42 pm #654372I would like to have this under the “artists” menu when it drops down. Thanks!
June 29, 2016 at 8:46 am #654660Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.av-main-nav li a:hover::after{ position:absolute; z-index:100000; left:-30px; top:50%; transform:translateY(-50%); } .av-main-nav li:nth-child(1) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav li:nth-child(2) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav li:nth-child(3) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav li:nth-child(4) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); }
Best regards,
VinayJuly 25, 2016 at 6:37 pm #664751Thank you!
What do I have to change in this code to have it only function with sub-menus?July 25, 2016 at 6:58 pm #664761Hi,
Try this:
.av-main-nav .sub-menu li a:hover::after{ position:absolute; z-index:100000; left:-30px; top:50%; transform:translateY(-50%); } .av-main-nav .sub-menu li:nth-child(1) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav .sub-menu li:nth-child(2) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav .sub-menu li:nth-child(3) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); } .av-main-nav .sub-menu li:nth-child(4) a:hover::after{ content:url('http://kriesi.at/themes/enfold-construction/files/2015/10/urban-development-36x36.jpg'); }
Best regards,
JosueJuly 26, 2016 at 3:38 pm #665365Thank you!
1) Now each sub-menu gets the same set and order of thumbnail pictures. Instead I would like to create a individual set/order of pictures for each sub-menu. Where do I specify menu item number ?
2) Is there a chance I can make pictures always appear at the same place?
3) Can I resize the picture by the %?July 28, 2016 at 2:05 pm #666238Hi,
every menu has its menu item number. Right click on chrome and choose to inspect the elements. Your “Artist” for example has “menu-item-244”: http://imgur.com/a/MxkED. So you could use something like this:
.av-main-nav #menu-item-244 .sub-menu li:nth-child(1) a:hover::after { }
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.