Add phone number/contact details to the header

How can I add a phone number and email address to the header?

 

Hello !


For this you have to add some code in header.php file please follow below image.

HTML:

<div class="grid_24">
<div class="grid_5 omega hello-header">
 
Hello ------------------!
 
</div>
 
<div class="clear"></div>
</div>

Thanks & Regards
Pramod

 

Hi,

Thanks for this. I tried this and it just adds text literally above the logo which doesn't look great. What would be great if we could have the logo on the left and then a phone number button on the right and then the menu below them. Something like the way it shows in the BlackRiders theme. I love the Compass theme and it is just the telephone number visibility that concerns me.

Any suggestions on how I could achieve this?

Thanks in advance

Matt

 

Hello !

You have to follow two steps.

Step 1:

PHP:

<div class="header">
          <div class="grid_8 alpha">
          <div class="logo">
            <a href="<?php echo home_url(); ?>"><img src="<?php if (inkthemes_get_option('inkthemes_logo') != '') { ?><?php echo inkthemes_get_option('inkthemes_logo'); ?><?php } else { ?><?php echo get_template_directory_uri(); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?> logo"/></a>
        </div>
          </div>
<div class="grid_4 main header">
<p class="text-header">
  jdgjhadjafdjaff
</p>
</div>
<div class="clear"></div>
          <div class="grid_24 omega">           
          <div class="menu_wrapper">
          <div id="MainNav">
            <?php inkthemes_nav(); ?>                     
          </div>
        </div>
          </div>     
<div class="clear"></div>         
</div>

Delete your code and use above code as mentioned in image.


Step 2:
Paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

p.text-header {
float: right;
margin-right: 25px;
background: rgb(102, 183, 198);
padding: 7px;
border-radius: 4px;
box-shadow: 1px 1px 10px rgb(102, 183, 198);
color: white;
}
.grid_4.main.header {
float: right;
margin: 0px;
padding: 10px;
}

Thanks & Regards
Pramod

 

Thank you, that's what I was after.

 

This works OK but the number is not aligned with the logo and appears below it, it appears ok on mobile view but looks odd with a normal browser. Is there a way in which I can bring it up in line with the logo? See attached screenshot.

 

This also causes the menu bar to move down leaving a bigger gap

 

Hi,

please provide us the URL of your website.

Thanks,
Praveen

 

Hi,

It is http://paperplusuk.com.gridhosted.co.uk/ Also I have noticed that the navigation menu is now not there on the mobile site.

 

Hi matthewford!

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 767px){
.mean-container .mean-nav ul {
display: block !important;
}
}

Thanks,
Praveen

 

Unfortunately this has made it even worse, I could email you access details if you wanted to have a look yourself?

 

Hi matthewford!

Please download and install a fresh copy of this theme.
If the issue doesn't resolve then provide us your wordpress login details at [email protected].

Thanks,
Praveen

 

Hi matthewford!

We have fixed your issue.Please have a look at your website.

Thanks,
Praveen