[Share] Secondary Navigation with Social Icons (Left) - Email/Phone (Right)

You can see quick demo in below screenshot.

We will use Announcement Bar to achieve this. You can follow these steps.

If you can't make it work, you can share site url in comment. I can check easier.

#1. First, you need to enable Announcement Bar.

#2. Next, add 3 texts (with links): Facebook, Instagram, Youtube.

and Phone/Email in Line 2

Next, add this URL format to Phone (remember to use your phone number)

and use this email url format

and we will have.

#3. Edit Site Footer > Add a Code Block > Paste this code

(Note: Code Block is available in Personal Plan, and this code can run on Personal Plan)

If you use a Business Plan or higher, you can use code to Code Injection > Header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#4. Use this code to Custom CSS box to turn text Facebook/Instagram/Youtube to Icons

div#announcement-bar-text-inner-id {
  /* remove links underline */
  p a {
    text-decoration: none !important;
}
  /* text to icons */
  a[href*="facebook"], a[href*="instagram"], a[href*="youtube"] {
    font-size: 0;
}
a[href*="facebook"]:before {
    content: "\f09a";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
}
a[href*="instagram"]:before {
    content: "\f16d";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
}
a[href*="youtube"]:before {
    content: "\f167";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
  margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
}
}

we will have

#5. Use this code to Custom CSS box to add phone/email icons before phone/email text

div#announcement-bar-text-inner-id {
  p a[href*="tel"]:before {
    content: "\f590";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 5px;
}
p a[href*="mailto"]:before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 5px;
    margin-left: 20px;
}
}

we will have

#6. Use this code to Custom CSS box both make both same line.

@media screen and (min-width:768px) {
    div#announcement-bar-text-inner-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
}}

we will have

#7. To change the Announcement Bar background, you can change the Site Style.

#8. To change the Email/Phone icon color, you can add color to this code

#9. To remove the Announcement Bar X Close icon, you can use this CSS code

span.sqs-announcement-bar-close {
    display: none;
}