Okay
  Public Ticket #3270070
icon list horizontal line
Closed

Comments

  •  17
    TheSnapAgency started the conversation
    March 8, 2023 at 1:25pm

    Hello,

    I am using the "icon list" element and noticed that the animated line doesn't appear to work for the horizontal layout. Please would you be able to instruct me on how I can make it work for this chosen layout?

    I have left a link to the page and have added this element to the bottom section.

  •  2,958
    Andrew replied
    March 8, 2023 at 1:34pm

    Hello again,

    Thank you for reaching out to us.

    Be sure to "Italicize" your text for the animation to work. See the screenshot below: 

    9528080008.png

    Thanks,

  •  17
    TheSnapAgency replied
    March 8, 2023 at 1:55pm

    Hello Andrew,

    Thanks for the feedback, however, it looks like you are referring to a different element. 

    I was reffering to the "icon list" element not the "highlighted text" element. I have uploaded a screenshot to hopefully make it easier to undestand.

    Attached files:  Screenshot 2023-03-08 at 13.54.36.png

  •  1,877
    Judith replied
    March 9, 2023 at 5:28am

    Hi there,

    Please send in your admin login details so that we can check this out further.

    Thanks.

  •   TheSnapAgency replied privately
  •  8,839
    Tahir replied
    March 9, 2023 at 11:10am

    Hey Again,

    Thanks for the logins credentials.

    I just logged in and can see the Icon List Element fields empty. Please place the content correctly or use a Pre-built Page layout in the Salient Studio.

    9428297428.pngClick on Image to View Larger

    Thanks 

    ThemeNectar Support Team 

  •  17
    TheSnapAgency replied
    March 9, 2023 at 11:54am

    Hi,

    Thanks for logging into the website and taking a look at this for me.

    Please note even when adding content into this field the line still does not appear when using the horizontal layout. If you revisit the page you will now see content in these fields, but still not line.

  •  8,839
    Tahir replied
    March 9, 2023 at 2:32pm

    Could you provide a screenshot of the line you are referring to on our demos ?.

    Thanks

    ThemeNectar Support Team 

  •  17
    TheSnapAgency replied
    March 10, 2023 at 10:04am

    If you load the page below you will see both versions and how the vertical layout has a line through the list with an animation.

    https://thesnapagency.com/website-dev/

  •  8,839
    Tahir replied
    March 10, 2023 at 10:24am

    Hey Again,

    By Design there is no line present when using the horizontal direction you can however use the CSS below to add it.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-icon-list[data-direction="horizontal"]:after {
    display: block;
    position: absolute;
    content: ' ';
    z-index: 1;
    height: 1px;
    background-color: rgba(0,0,0,.1);
    width: 100%;
    top: 15px;
    left: 15px;
}

    Thanks

    ThemeNectar Support Team 

  •  8,839
    Tahir replied
    March 10, 2023 at 10:25am

    Hey Again,

    By Design there is no line present when using the horizontal direction you can however use the CSS below to add it.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-icon-list[data-direction="horizontal"]:after {
    display: block;
    position: absolute;
    content: ' ';
    z-index: 1;
    height: 1px;
    background-color: rgba(0,0,0,.1);
    width: 100%;
    top: 15px;
    left: 15px;
}

    Thanks

    ThemeNectar Support Team