Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 25, 2016 at 7:33 pm #677720
    advteksol

    I’m trying to create a bar with some links as images (see below). However, when I mouse over the image with the link, the image disappears. I’ve tried it in both a text box and a code block with the same effect. Can you please help me make it so it doesn’t disappear and I can click on it to go to the link.

    View post on imgur.com

    Thanks in advance

    August 29, 2016 at 2:56 pm #678940
    Yigit

    Hey advteksol,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your code block element and give it a custom CSS class and then add following code to Quick CSS 

    .your-custom-class a {
    display: inline-block!important;
    margin-left: -4px;
}

    Best regards,
    Yigit

    August 29, 2016 at 3:27 pm #678977
    advteksol

    That works except for after the third (last) linked image, the next image extending the blue bar to the right does not show up. How can I make it show up?

    Thanks.

    August 29, 2016 at 4:31 pm #679015
    Yigit

    Hey!

    Please change the code to following one 

    .asf-footer-mu a {
    display: initial!important;
    margin-left: -4px;
}

    Cheers!
    Yigit

    • This reply was modified 8 years, 2 months ago by Yigit.
    August 29, 2016 at 5:06 pm #679044
    advteksol

    That’s works! One more question, if I wanted to place that bar image with the links into the (single) footer widget using a text box, how would I insert the css information you provided above for it?

    Thanks.

    August 29, 2016 at 5:09 pm #679049
    Yigit

    Hi!

    As long as your custom CSS class is in place, you do not need to add additional code.
    If you would like to target only your code in footer section, please use 

    #footer .asf-footer-mu a {
    display: initial!important;
    margin-left: -4px;
}

    Cheers!
    Yigit

    August 29, 2016 at 5:21 pm #679055
    advteksol

    Sorry, but I’m not understanding. I put the html code with the images and links into a footer text widget. How do I link that to the as-footer-mu – there is no place to add a custom css class as with the code block on a page. Or do I need to go about this another way?

    August 29, 2016 at 11:14 pm #679187
    Yigit

    Hi,

    You can simply wrap your custom HTML code inside a div tag with a custom class as following

    

<div class="asf-footer-mu">
YOUR HTML CODE HERE
</div>

    and then use the code i posted in my previous message.

    Best regards,
    Yigit

    August 29, 2016 at 11:24 pm #679192
    advteksol

    Thanks, that does it! Appreciate all your help!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Linked Images Disappear On Mouseover’ is closed to new replies.