Viewing 30 posts - 1 through 30 (of 39 total)
  • Author
    Posts
  • #861046

    As the topic says, my social media icons are not showing when viewing my site on a mobile device. I’ve tried some of the suggestions on other posts, but nothing works.

    I have WordPress 4.8.2 and Enfold 3.8.

    Thank you,
    hp

    #861477

    Hey hopkinsprinting,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 479px) {
      ul.social_bookmarks {
        display:block !important;
      }
    }

    Best regards,
    Rikard

    #861909

    Hi Rikard,

    Thank you for the reply. I tried that and it didn’t work even after refreshing the page a couple times on my smart phone.

    Thanks,
    Jon

    #862232

    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

    #862459

    Hi Nikko,

    Thank you for your reply. Unfortunately, that also did not work.

    Thanks,
    Jon

    #862708

    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

    #865452

    Provided.

    #865654

    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 6 years, 5 months ago by Victoria.
    #865701

    Hi Victoria,

    How do I flush the cache?

    Thank you,
    Jon

    #866124

    Hi Jon,

    Local cache you can clean from your browser, and if you are running a caching plugin then you would have to clear that cache as well from the plugin interface.

    Best regards,
    Rikard

    #866689

    Hi Rikard,

    I have cleared the cache on my mobile device and the icons still don’t show. I tried Samsung Internet and Chrome.

    I also checked my site for any Cache plugins. There is a Hyper Cache plugin installed but it’s not enabled.

    Thanks,
    Jon

    #867298

    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

    #906411

    Hi all,

    I have finally managed to get both WP and Enfold updated. So, what is the best way to get the social media icons to show on the mobile version?

    Thank you,
    Jon :-)

    #906421

    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

    #906430

    Hi Jordan,

    I went to Enfold > General Styling > Quick CSS and added the code to the bottom of the Quick CSS field but it still isn’t working.

    Thanks,
    Jon

    #906436

    Hi,

    Please try and add it to the top instead.

    Best regards,
    Jordan Shannon

    #906442

    Also didn’t work.

    Thank you,
    Jon

    #906686

    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

    #906861

    Hi Nikko,

    File permission was already set to 755 for the entire path including parent folders.

    Thanks,
    Jon

    #906921

    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

    #906969

    Not being a coder, I am assuming that I should have seen a blank screen after inputting that code. If that’s correct, then it doesn’t appear that Quick CSS is working as I can still see my website (desktop and mobile) with that code in place at the top of Quick CSS.

    Thanks,
    Jon

    #907675

    Hi,

    There was a missing curly brace before. We deactivated the cache plugins temporarily and then modified the css codes.

    Best regards,
    Ismael

    #908004

    OUTSTANDING! The social media icons now appear on the mobile site.

    Thank you so much!
    Jon :-)

    #908045

    Hi Jon,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #908256

    Hi Victoria,

    Now that the icons are working, I do have another issue with the mobile site. I don’t like the positioning of the menu button (3 horizontal lines) being next to the icons. Can the menu button me put somewhere else for the mobile version of the site?

    Thanks,
    Jon

    #908312

    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

    #908605

    Hi Nikko,

    Much better! Now, is there a way to horizontally center the social media icons on the mobile version of the site?

    Thanks,
    Jon :-)

    #908619

    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

    #908627

    PERFECTO!!!

    Thank you so much!
    Jon :-)

    #908636

    Hi Jon,

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

    Best regards,
    Nikko

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