Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 25, 2018 at 3:36 pm #1026371
    nscalessa

    We currently have this code provided by Kriesi in the Theme > Enfold > Custom CSS on https://librarycompany.org/ so that the social icons do not overlap the menu and logo on tablets (Mobile phones work fine). However, after the last few Enfold updates it does not work and the social icons will not go away any more. I tried playing with the min/max width to no avail. Thanks for the help! ~ Nicole

    P.S. This is also happening to another site I have http://www.pacscl.org – I was hoping to use the same code on both to fix the issue.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .main_menu ul.social_bookmarks {
    display: none;
    }
    div .logo {
    width: 80%;
    padding-top: 3%;
    }
    .header-scrolled.header-scrolled-full div .logo,
    .header-scrolled div .logo {
    padding-top: 0%;
    }
    .responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
    display: none !important;
    }}

    October 26, 2018 at 2:20 pm #1026796
    Victoria

    Hey nscalessa,

    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) and (min-width: 768px) {
    .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
        display: block;
    }
}
@media only screen and (max-width: 479px) {
    .responsive #top #wrap_all #header #header_meta .social_bookmarks {
        display: block;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 2, 2018 at 5:54 pm #1029242
    nscalessa

    This code still is not working. I have tried in both Chrome and Edge. I have placed it both in Quick CSS and in Appearance > Theme > CSS. Go to http://www.librarycompany.org to see what is happening.

    Thanks,
    Nicole

    November 5, 2018 at 4:28 pm #1029953
    Victoria

    Hi Nicole,

    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 (min-width:480px) and (max-width: 989px) {
    #top #wrap_all .main_menu .social_bookmarks {
        display: none;
    }
    #top .avia-menu.av_menu_icon_beside {
        border: none;
        transition: none;
    }
    .responsive #top .logo img {
        margin-top: 20px;
        width: 80%;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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