How do I bold a linked phone number in the navigation menu?

Site URL: https://www.standardroofingok.com

Hey there,

I'm working on a website for a client and he wants to make the linked phone number stand out (maybe bold, or yellow). Is this possible somehow? I came across some similar questions on here, but no luck with the code in their answers.

Add the following to Custom CSS.

body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .black-bold .header-nav-wrapper a[href="tel:+14052368401"] {

  color : yellow;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Thanks for your help! That code worked perfectly for the color change.

Hi there, I'm also looking to make my phone number bold in my header to make it stand out from the other navigation links.

I tried adapting the code you provided here but it's not working. Can you please let me know if you have a solution for bolding just the phone number? Thank you!

https://typeaprofessionals.com

In case this is needed, here's the code I'm currently using to have the navigation links hover in the green color, which I want to keep as is:

.header-nav *:hover {
    color: #BABC16 !important;
}

@pixies1

Add the following to Design > Custom CSS.

.header-nav-item [href="tel:+18055008973"] {

  font-weight : 600;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Voila! Looks great, thank you so much!

Hi again 👋 Is it possible to hide my phone number from the mobile navigation menu?

Thanks in advance!

https://typeaprofessionals.com

@pixies1

Add the following to Design > Custom CSS.

/* hide phone number in navigation menu on mobile */

.header-menu-nav-item [href="tel:+18055008973"] {

  display : none;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Worked perfectly, thank you!