Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 4, 2022 at 11:24 pm #1338965
    Ryan

    I added / edited the “small bar above main menu” via advanced styling, and added phone number top left, social icons top right. I also edited the phone number text with this CSS:

    .phone-info {
    font-size: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    }

    Now, I would like to modify the social icons by:

    Centering them height-wise with the phone info
    removing the borders in between them
    adding a circular background #c24e2d

    like this:
    snip-Untitled-1

    Thanks!
    Ryan

    February 5, 2022 at 8:42 pm #1339091
    Mike

    Hey Ryan,
    Your screenshot link is not working but I believe that the css below will achieve what you wanted, I just wasn’t sure about the circular background #c24e2d, did you always want that or only on mouse-over? This solution makes it always.

    #top .av_extra_header_active .social_bookmarks li {
    border-right-style: none;
    border-right-width: 0;
}
#top .av_extra_header_active .social_bookmarks {
	padding-top: 4px;
}
#top .av_extra_header_active .social_bookmarks li a {
    border-radius: 25px;
    background: #c24e2d!important;
}

    the expected results:
    2022-02-05_010.jpg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 6, 2022 at 1:51 am #1339128
    Ryan

    Awesome, it worked. How do I add 10 px spacing between each orange circle?

    Thanks,
    Ryan

    February 6, 2022 at 2:04 pm #1339170
    Mike

    Hi,
    Add 10px margin-right to the #top .av_extra_header_active .social_bookmarks li rule, like this:

    #top .av_extra_header_active .social_bookmarks li {
    border-right-style: none;
    border-right-width: 0;
    margin-right: 10px;
}
#top .av_extra_header_active .social_bookmarks {
	padding-top: 4px;
}
#top .av_extra_header_active .social_bookmarks li a {
    border-radius: 25px;
    background: #c24e2d!important;
}

    Best regards,
    Mike

    February 7, 2022 at 5:19 pm #1339407
    Ryan

    Perfect, thanks. You can close this one!

    February 7, 2022 at 7:13 pm #1339428
    Yigit

    Hi,

    We are glad that Mike could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Editing social icons in the small bar above main menu’ is closed to new replies.