Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 9, 2025 at 7:16 pm #1489093
    icarogioiosi

    Hello everyone.
    At https://kriesi.at/documentation/enfold/social-share-buttons/#toggle-id-1, I found this code to display social media icons on mobile devices:

    /* Do not hide social bookmarks */
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
display: block;
}}

    It works perfectly, but the icons are to the right of the menu.
    Would it be possible to have them between the logo and the menu instead?

    02

    Alternatively, is it possible to insert them within the mobile menu?
    Regards.

    September 10, 2025 at 8:04 am #1489119
    Guenni007

    try 

    @media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .main_menu {
    display: flex !important;
    flex-flow: row-reverse;
    align-items: flex-start;
    height: 100% !important;
  }
  #top #wrap_all .social_bookmarks {
    padding-right: 20px;
    border-right: 1px solid var(--enfold-header-color-meta);
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .av_seperator_big_border .avia-menu.av_menu_icon_beside {
    border: none;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block !important;
    top: 40px
  }
  .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    align-items: flex-start;
  }
  .responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside {
    padding-right: 0;
    margin-right: 0;
    border: none;
  }
}

    and check please the style on screens less than 767px if that fits for you. on medical demo it works well.

    September 10, 2025 at 8:11 am #1489120
    Guenni007

    btw. your code sometimes leads to show the social icons twice. Because the example of medical demo has the navigation below the logo container.
    Then we have those social icons twice in the DOM

    Therefore (menu below the logo) , it is better to define your code as follows:
    ( for those settings where the social bookmarks are not visible below 767 you had to adjust that code)

    @media only screen and (max-width: 479px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block;
  }
}
    September 10, 2025 at 9:07 am #1489123
    Guenni007

    it all depends on your setting . so it will be the best to see the concerning site.
    f.e. if you got a setting that the burger is visible from the beginning – like in freelancer demo

    then you had to remove the media-query setting for screens above 768px.

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