Title: Adding button to header
Last modified: August 28, 2017

---

# Adding button to header

 *  Resolved [nevphillips](https://wordpress.org/support/users/nevphillips/)
 * (@nevphillips)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/)
 * Hi there
 * I was wondering if it is possible to add a button to the header. For example,
   a button with the text “Book an Inspection”. This take you the contact us page.
 * Thanks in advance
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-button-to-header-3%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Subrata Sarkar](https://wordpress.org/support/users/subrataemfluence/)
 * (@subrataemfluence)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/#post-9449770)
 * First of all, please make sure you are working on a Child Theme. Otherwise updating
   theme will wipe out all your changes you made in its original files.
 * If you already have a child theme in place, navigate into that folder and open
   the file called `header.php` and locate for the line `<ul class="head-contact-
   info">`. Inside it add the following code:
 * `<a class="header-inpection-button" href="/">Book an Inspection</a>`
 *     ```
       .header-inspection-button {
            padding: .4em;
            background: #fff;
            color: #232425;
            border-radius:.2em;
       }
       ```
   
 * Add above CSS rule in your site’s `style.css` or you can add it by going to `
   Appearance > Customize > Additional CSS`.
 * Change the value of `href` property to your actual page.
 * The above modification will create the button in the header and it will should
   like this:
 * [https://prnt.sc/geciq3](https://prnt.sc/geciq3)
 * Let me know if this helps.
 *  [weblizar_support](https://wordpress.org/support/users/weblizar_support/)
 * (@weblizar_support)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/#post-9449795)
 * Hello nev,
 * Yes you can add button on header.
 * open header.php see the code below –
 *     ```
       <ul class="social">
       					<?php if($wl_theme_options['fb_link']!='') { ?>
       					   <li class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><a  href="<?php echo esc_url($wl_theme_options['fb_link']); ?>"><i class="fa fa-facebook"></i></a></li>
       					<?php } if($wl_theme_options['twitter_link']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"><a href="<?php echo esc_url($wl_theme_options['twitter_link']); ?>"><i class="fa fa-twitter"></i></a></li>
       					<?php } if($wl_theme_options['linkedin_link']!='') { ?>					
       					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><a href="<?php echo esc_url($wl_theme_options['linkedin_link']); ?>"><i class="fa fa-linkedin"></i></a></li>
       					<?php } if($wl_theme_options['youtube_link']!='') { ?>
       					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"><a href="<?php echo esc_url($wl_theme_options['youtube_link']) ; ?>"><i class="fa fa-youtube"></i></a></li>
       	                <?php } if($wl_theme_options['gplus']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="gplus"><a href="<?php echo esc_url($wl_theme_options['gplus']) ; ?>"><i class="fa fa-google-plus"></i></a></li>
       	                <?php } if($wl_theme_options['instagram']!='') { ?>
       					<li class="instagram" data-toggle="tooltip" data-placement="bottom" title="instagram"><a href="<?php echo esc_url($wl_theme_options['instagram']) ; ?>"><i class="fa fa-instagram"></i></a></li>
       	                <?php } if($wl_theme_options['vk_link']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="vk"><a href="<?php echo esc_url($wl_theme_options['vk_link']) ; ?>"><i class="fa fa-vk"></i></a></li>
       	                <?php } if($wl_theme_options['qq_link']!='') { ?>
       					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="qq"><a href="<?php echo esc_url($wl_theme_options['qq_link']) ; ?>"><i class="fa fa-qq"></i></a></li>
       	                <?php } if($wl_theme_options['whatsapp_link']!='') { ?>
       					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="whatsapp"><a href="tel:<?php echo esc_attr($wl_theme_options['whatsapp_link']) ; ?>"><i class="fa fa-whatsapp"></i></a></li>
       	                <?php } ?>
       					</ul>
       ```
   
 * Replace it with the below code –
 *     ```
       <ul class="social">
       					<?php if($wl_theme_options['fb_link']!='') { ?>
       					   <li class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><a  href="<?php echo esc_url($wl_theme_options['fb_link']); ?>"><i class="fa fa-facebook"></i></a></li>
       					<?php } if($wl_theme_options['twitter_link']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"><a href="<?php echo esc_url($wl_theme_options['twitter_link']); ?>"><i class="fa fa-twitter"></i></a></li>
       					<?php } if($wl_theme_options['linkedin_link']!='') { ?>					
       					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><a href="<?php echo esc_url($wl_theme_options['linkedin_link']); ?>"><i class="fa fa-linkedin"></i></a></li>
       					<?php } if($wl_theme_options['youtube_link']!='') { ?>
       					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"><a href="<?php echo esc_url($wl_theme_options['youtube_link']) ; ?>"><i class="fa fa-youtube"></i></a></li>
       	                <?php } if($wl_theme_options['gplus']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="gplus"><a href="<?php echo esc_url($wl_theme_options['gplus']) ; ?>"><i class="fa fa-google-plus"></i></a></li>
       	                <?php } if($wl_theme_options['instagram']!='') { ?>
       					<li class="instagram" data-toggle="tooltip" data-placement="bottom" title="instagram"><a href="<?php echo esc_url($wl_theme_options['instagram']) ; ?>"><i class="fa fa-instagram"></i></a></li>
       	                <?php } if($wl_theme_options['vk_link']!='') { ?>
       					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="vk"><a href="<?php echo esc_url($wl_theme_options['vk_link']) ; ?>"><i class="fa fa-vk"></i></a></li>
       	                <?php } if($wl_theme_options['qq_link']!='') { ?>
       					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="qq"><a href="<?php echo esc_url($wl_theme_options['qq_link']) ; ?>"><i class="fa fa-qq"></i></a></li>
       	                <?php } if($wl_theme_options['whatsapp_link']!='') { ?>
       					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="whatsapp"><a href="tel:<?php echo esc_attr($wl_theme_options['whatsapp_link']) ; ?>"><i class="fa fa-whatsapp"></i></a></li>
       	                <?php } ?>
       					</ul>
       <div class="col-md-12 head-buttons"><a href="#" class="head-button">contact-us</a>
       ```
   
 * You can change the value of “#” with your requirement link then save the file.
 * and paste the below code in custom CSS box –
 *     ```
       a.head-button {
           float: right;
           background-color: #fff;
           padding: 10px;
           color: #000;
           font-size: 16px;
           display: inline-block;
       }
       a.head-button:hover {
           background-color: #000;
           color: #fff;
       }
       ```
   
 * and save the changes. You can change the color as per your choice.
    -  This reply was modified 8 years, 9 months ago by [weblizar_support](https://wordpress.org/support/users/weblizar_support/).
    -  This reply was modified 8 years, 9 months ago by [weblizar_support](https://wordpress.org/support/users/weblizar_support/).
 *  Thread Starter [nevphillips](https://wordpress.org/support/users/nevphillips/)
 * (@nevphillips)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/#post-9463928)
 * Thanks for your help
 *  [weblizar_support](https://wordpress.org/support/users/weblizar_support/)
 * (@weblizar_support)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/#post-9466275)
 * You’re most welcome.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding button to header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/enigma-parallax/7.71/screenshot.
   png)
 * Enigma Parallax
 * [Support Threads](https://wordpress.org/support/theme/enigma-parallax/)
 * [Active Topics](https://wordpress.org/support/theme/enigma-parallax/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/enigma-parallax/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/enigma-parallax/reviews/)

 * 4 replies
 * 3 participants
 * Last reply from: [weblizar_support](https://wordpress.org/support/users/weblizar_support/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/adding-button-to-header-3/#post-9466275)
 * Status: resolved