Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • November 12, 2019 at 5:06 pm #1156050
    VipProduction

    Hi,
    1) how can we add and fix the social media icons for mobile version of our website on the top right side in the Header? Now we have it only in desktop version.
    2) how can we save the color of each social icons? We need to have color icons all the time, not only when we put the cursor on it.

    Thank you for your help.

    November 12, 2019 at 9:05 pm #1156147
    Jordan Shannon

    Hey VipProduction,

    Please enable right click so we can inspect the code.

    Best regards,
    Jordan Shannon

    November 12, 2019 at 9:16 pm #1156165
    VipProduction

    Hi, thank you for your reply! Now we enable right click.

    November 12, 2019 at 9:38 pm #1156185
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px){
.responsive #top #header .social_bookmarks {
     display: block!important;
}}

    Best regards,
    Jordan Shannon

    November 12, 2019 at 9:57 pm #1156200
    VipProduction

    Thank you. What we need to do to make our social bookmarks colorful for mobile version?
    Now we use for desktop version this code:

    #top #wrap_all .av-social-link-facebook a {
    background-color: #37589b;color:#fff
    }

    November 12, 2019 at 10:09 pm #1156206
    VipProduction

    And we don’t understand how to fix the mobile menu (when you scroll it up, not down) Is it possible? You have it before, but after updating the theme we don’t have it… Thank you very much for your help.

    November 12, 2019 at 10:27 pm #1156210
    Jordan Shannon

    Hi,

    Add this to quick css:

    .social_bookmarks_facebook a{
color:#fff!important;
background:#37589b!important;
}

.social_bookmarks_instagram  a{
color:#fff!important;
background:brown!important;
}

.social_bookmarks_whatsapp a{
color:#fff!important;
background:green!important;
}

    Best regards,
    Jordan Shannon

    November 13, 2019 at 12:39 pm #1156372
    VipProduction

    Hello, thank you for your reply.
    How can we change the view of social icons in mobile version? We need to make them like this: https://prnt.sc/pwbpp9

    Thank you!

    November 13, 2019 at 10:49 pm #1156555
    Jordan Shannon

    Hi,

    Is this for the footer?

    Best regards,
    Jordan Shannon

    November 13, 2019 at 10:52 pm #1156558
    VipProduction

    Hi, we need it for the Header. Thank you.

    November 15, 2019 at 8:09 pm #1157282
    Victoria

    Hi VipProduction,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:989px){
    .responsive #top #header_meta .social_bookmarks li a {
        border-radius: 18px;
    }
    .responsive #top #header_meta .social_bookmarks li {
        border: none;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 17, 2019 at 5:16 pm #1157659
    VipProduction

    Thank you very much! The last question is how to delete this vertical black line (pls. see private content).

    November 18, 2019 at 1:11 pm #1157865
    Mike

    Hi,
    Thank you for the screenshot, although it looks a little different than your site, the screenshot looks like a round “Whatsapp”
    Please see the screenshot in Private Content area.
    So typically these lines are right borders which can be removed, but in this case it looks like a “printed” text “pipe” symbol, which you should be able to remove from the Enfold Theme Options > Header > Extra Elements > Phone Number or small info text field, please see source code in screenshot in Private Content area.
    Please try this, if I’m looking at the wrong element please clarify, otherwise Please include an admin login in the Private Content area so we can investigate.

    Best regards,
    Mike

    September 6, 2020 at 1:43 pm #1243734
    mnydish

    I’m having the same issue, trying to remove the lines between the extra element. The site uses a phone number, and 2 social icons. I would like to remove the lines between those and also bet nee those extra elements and the navigation below.

    September 6, 2020 at 2:44 pm #1243738
    Mike

    Hi,
    Thanks for the link to your site, to remove the horizontal border between the social icons, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .social_bookmarks li {
    border-right-style: none !important;
    border-right-width: 0px !important;
}

    To remove the extra elements bottom border, please try this css:

    #top .av_header_transparency #header_meta {
    border-bottom: 0px none transparent !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 6, 2020 at 2:48 pm #1243741
    mnydish

    PERFECT! Thank you.

    September 6, 2020 at 7:19 pm #1243762
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Social media icons’ is closed to new replies.