Social Media Icons Not Showing on Mobile Site

Hi,

Try using this css code:

@media only screen and (max-width: 479px) {
  .responsive.html_header_top #header_main .social_bookmarks {
    display: block !important;
    position: static;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi,

Can you give us temporary admin access? so we can check. Also the latest version is already 4.1.2, please update it to the latest version but don’t forget to make a backup first. For more information on updating the theme you can check: http://kriesi.at/archives/the-complete-guide-to-updating-enfold

Best regards,
Nikko

Hi hopkinsprinting,

With the version of the theme that you’re using, the social links will appear below the menu (screenshot below) after adding the code Nikko gave you, the new version has social links at the very top. https://cl.ly/3V0v0e0p3e0X

You need to add the code, flush the cache or put the code in enfold/custom.css and flush the cache.

Best regards,
Victoria

• This reply was modified 7 years, 1 month ago by Victoria.

Hi Jon,

Looks like the css file does not get regenerated when any changes are made in quick css. This could be due to a plugin conflict.

Can you try to put the code via FTP in /wp-content/themes/enfold/css/custom.css file.

Best regards,
Victoria

Hi,

Try adding this to quick css:

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

Best regards,

Jordan Shannon

Hi,

Please try and add it to the top instead.

Best regards,
Jordan Shannon

Hi,

Seems like there’s some caching issue, there’s some weird characters on your css file preventing it to work properly (see screenshot in private content), I have tried to comment out the code that has weird characters and clearing browser cache but it doesn’t seem to fetch the new css codes from Quick CSS, can you try to check the file permission of enfold.css if it’s set to 755?

Best regards,
Nikko

Hi,

Is any of your css being read? For example if you do something such as:

body{
display:none;
}

to the top of quick css does it work?

Best regards,
Jordan Shannon

Hi Jon,

Glad we got it working for you! :)

If you need further assistance please let us know.

Best regards,
Victoria

Hi Jon,

Can you try adding this css code in Quick CSS:

@media only screen and (max-width:479px) {
  #top #header #avia-menu {
    position: absolute;
    top: -70px;
    left: 260px;
  }
}

Hope this helps.

Best regards,
Nikko

Hi Jon,

You’re welcome :) Try to replace this code I gave:

@media only screen and (max-width:479px) {
  #top #header #avia-menu {
    position: absolute;
    top: -70px;
    left: 260px;
  }
}

to:

@media only screen and (max-width:479px) {
  #top #header #avia-menu {
    position: absolute;
    top: -70px;
    left: 260px;
  }

  #top .main_menu .social_bookmarks {
    width: 180px;
    margin: 0 auto;
    float: none;
    position: relative;
    top: 28px !important;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi Jon,

Glad we could help! :) Let us know if you need further assistance or if we can close this thread :)

Best regards,
Nikko