Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #898438

    Hi
    Please, need support for a website.
    The social media icons appears on the deskop view but not on the mobile view (top bar).
    I read other people’s topics with the same problem and put their CSS code in the quick CSS field but without success.
    Thanks for help.

    #898977

    Hey fabian1989,

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

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

    Best regards,
    Rikard

    • This reply was modified 2 years ago by  Rikard.
    #899110

    Hi Rikard
    Great, the icons appeard but are now in the middle of the screen. How can I change the position, more to the right site of the top bar?
    Thank you and great support. Fabian

    #899491

    Hi Fabian,

    Please try this instead of what I posted previously:

    @media only screen and (max-width: 990px) {
    .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
        display: block !important;
        text-align: right !important;
    }
    }

    Best regards,
    Rikard

    #899557

    Hi Rikard,

    perfect, thanks.

    #900042

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #929629

    Hi,
    I tried to add css code as suggested in may posts, but social icons never appear when in responsive mode.
    Any suggestion?
    Thanks

    #930310

    Hi kumharas,

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

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

    Best regards,
    Rikard

    #930525

    Hi Rikard,
    It does not work. But I noticed that I already have this code in my style.css:

    @media only screen and (max-width: 1020px) {
    .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
    }
    

    Commenting out this code and adding your code works and makes social icons to appear on mobile.

    How to merges both codes?
    Thanks a lot.

    #930682

    Hi,

    It is not clear which two codes would you like to merge?

    If it is the latest 2 codes above it would be as below:

    Please note the media query width is different for both. It is best to keep them as separate codes.

    @media only screen and (max-width: 990px) {
    .responsive.html_mobile_menu_tablet #header_main .social_bookmarks {
      display:block !important;
    }
    
    .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
    }

    Best regards,
    Vinay

    #931457

    Hi Vinay,

    I want mobile menu to appear when resolution is bellow 1020px.
    I also want to have social icons to appear when switching to mobile menu (bellow 1020px as well).

    I tried code you provided, but social icons don’t appear when in mobile menu mode.
    I emptied browser cache before refreshing page and no cache plugin is enabled in WP.

    Thanks

    #932195

    Hi,

    We adjusted the code a bit. Please try it again.

    @media only screen and (max-width: 1100px) {
    .responsive #header_main .social_bookmarks {
      display:block !important;
    }
    
    .responsive .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
    .responsive .container #advanced_menu_toggle, .responsive #advanced_menu_hide{display:block;}
    }

    Don’t forget to remove the browser cache or do a hard refresh before you check the page.

    Best regards,
    Ismael

    #932964

    Hi Ismael,
    Unfortunately it does not work with code you provided.
    When I I insert only this code, it works:

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

    But obviously mobile menu does not switch when resolution is bellow 1020px.
    Thanks.

    #933104

    Hi kumharas,

    .responsive .container #advanced_menu_toggle, .responsive #advanced_menu_hide{display:block;} 

    This code has to be removed, those elements are not present since Enfold 4.2.

    Best regards,
    Victoria

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.