Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 17, 2018 at 12:45 pm #898438
    fabian1989

    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.

    January 18, 2018 at 10:27 am #898977
    Rikard

    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 6 years, 11 months ago by Rikard.
    January 18, 2018 at 12:49 pm #899110
    fabian1989

    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

    January 19, 2018 at 5:48 am #899491
    Rikard

    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

    January 19, 2018 at 9:06 am #899557
    fabian1989

    Hi Rikard,

    perfect, thanks.

    January 20, 2018 at 8:54 am #900042
    Rikard

    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

    March 20, 2018 at 9:54 am #929629
    kumharas

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

    March 21, 2018 at 5:48 am #930310
    Rikard

    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

    March 21, 2018 at 12:23 pm #930525
    kumharas

    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.

    March 21, 2018 at 5:08 pm #930682
    Vinay

    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

    March 22, 2018 at 5:03 pm #931457
    kumharas

    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

    March 24, 2018 at 3:09 am #932195
    Ismael

    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

    March 26, 2018 at 12:08 pm #932964
    kumharas

    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.

    March 26, 2018 at 5:02 pm #933104
    Victoria

    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

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