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

    #594377

    Hey 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 Kashyap

    #646064

    Hello,
    How do I create the same in menus and sub-menus?
    Thanks!

    #646895

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #654372

    I would like to have this under the “artists” menu when it drops down. Thanks!

    #654660

    Hi,

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

    #664751

    Thank you!
    What do I have to change in this code to have it only function with sub-menus?

    #664761

    Hi,

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

    #665365

    Thank 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 %?

    #666238

    Hi,

    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.