Phone Number in Header

[Jason Koblin]

Hi Bill,

I’d like to add a phone number in the header, preferably on the right hand side. I did see this post (https://support.organizedthemes.com/forums/topic/inserting-an-image-widget-in-the-header-space-above-the-tag-line/) but the code is a bit different so I wasn’t sure where to paste the code you provided.

Thanks!

[Bill Robbins]

Jason,

Thank you for your business first of all. Great question too. You can add in a phone number to the header in the Bottega theme. Here’s how:

Go to the Appearance section and select Edit.
1. From the list of files on your right, choose header.php and look for this spot:

   
   <div id="navigation">
   

2. Right above that paste this:

3. Change the 17176953148 to your phone number with a “1” in front of it if you’re in the US. Change the 717.695.3148 to the text you’d like to make clickable and visible in your header.
4. Save your changes.
5. Next go to the Theme Options page and select the styling tab. Scroll down to the Custom CSS box and paste this:

   
   
   #phone-number {
   	position: absolute;
   	top: 19px;
   	right: 20px;
   }
   
   #phone-number p {
   	margin: 0;
   }
   
   #phone-number a,
   #phone-number a:visited {
   	color: #fff;
   }
   
   @media only screen and (max-width: 1023px) {
   	
   	#phone-number {
   		position: relative;
   		top: auto;
   		right: auto;
   		width: 100%;
   		text-align: center;
   	}
   	
   	#navigation .menu li {
   		float: none;
   	}
   
   }
   

6. Update your settings.

That should add in a phone number to your header that’s also a link.

If you have any questions or trouble, let me know.

Thanks again,
Bill

[Jason Koblin]

Thanks Bill, that worked perfectly.

I hope this tip helps some of your other users, this is so important, especially for a great responsive theme like this one.

[Bill Robbins]

Always glad to help Jason. I think I’ll roll that into a theme update so everyone can use it too.

Thanks,
Bill

[Author]

Posts