Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 22, 2019 at 8:33 pm #1070473
    zimbo

    Website: dev.henleyherald.com

    In the header in the Social Bookmarks area there is a Subscribe button to allow a user to subscribe to the site.

    The width of the individual icon container is set by

    #top .social_bookmarks li { width: 36px;}

    The Subscribe button image is 113px wide but by using this CSS

    .html_bottom_nav_header #top .av-logo-container .social_bookmarks { right: 83px;}

    …I shift the outer ul element and the image flows out right of the container and displays in full.

    I want to display the social icons block in the socket. This is enabled on the site but if you have a look at it, you will see the problem.

    I have shifted the ul element in the socket in a similar manner by

    #socket .social_bookmarks { right: 83px;}

    …but the image does not overflow the li element as it does in the header because of this in the Enfold code:

    #socket .social_bookmarks li {overflow: hidden;}

    I have tried all sorts of combinations of CSS to target the li element of Subscribe (social_bookmarks_subscribe av-social-link-subscribe social_icon_5) and change it to overflow:visible but without success. I also need to remove the border-radius on the element.

    Please can you tell me the correct CSS to get this to work?

    • This topic was modified 5 years, 10 months ago by zimbo.
    February 25, 2019 at 7:18 pm #1071423
    Victoria

    Hey zimbo,

    Could you please attach a mockup of what you’re trying to achieve?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    February 25, 2019 at 7:52 pm #1071446
    zimbo

    The website address is the first line of the original post.

    I also stated “if you have a look at it (on the site), you will see the problem.”

    I want the Subscribe button in the socket to display as it does in the header.

    March 1, 2019 at 5:15 am #1072869
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #socket .social_icon_5 {
  width:120px;
  border-radius:0;
}

    Best regards,
    Rikard

    March 1, 2019 at 2:48 pm #1073205
    zimbo

    Thanks Rikard, it worked when I added !important to both.

    March 2, 2019 at 10:39 pm #1073756
    Victoria

    Hi zimbo,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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