Secondary Navigation Custom Style #1

We will create a secondary navigation bar like this screenshot.

#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

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)

<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;
}