Social button in the header on mobile phones

Hey Martin,

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

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

Best regards,
Rikard

Hi,

Thank you for the update.

You can add this css code to align the social icons and the subnavi beside each other.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #header_meta .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .responsive #top #header .social_bookmarks {
    display: block !important;
    float: none;
    width: auto;
  }

  .responsive #header .sub_menu,
  .responsive #header_meta .sub_menu>ul {
    float: none;
    margin: 0;
    width: auto;
    position: relative;
    margin-top: -10px;
  }
}

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard