Can I get a how-to? Adding a button on contact info header area

How can I add a cta button next to my social icons in the upper right section of the header?

Referencing this - https://demo.athemes.com/finance/

Hello there,

From your site dashboard, visit Appearance > Customize > Sydney Pro: Extra Options; then go to Header contact info; set the button name onto “Call to action title” box and set the link onto “Call to action url” box.

08%20AM

Regards,
Kharis

Hi Kharis:

Thanks for the reply. Here’s a shot of the options I see under “Header Contact Info” - nothing about “Call to Action” options…What do you suggest?

Hello there,

From your dashboard, visit Appearance > Themes; and check if the Finance child heme is active.

Regards,
Kharis

Sorry for the misunderstanding - I’m not using the Finance child theme. I’m using the “Default” Sydney Pro theme. I want to add that header button that the Finance theme has to my existing configuration (see screenshot at the top of the thread). Is that possible?

Hi, ljh707.

Did you solve this problem, I’m wanting to do the same.

Hello there,

To accomplish it, try adding this PHP snippet to your child theme’s functions.

add_filter('wp_nav_menu_items', 'sydney_pro_child_top_cta', 10, 2);
function sydney_pro_child_top_cta($items, $args){

  $link = 'https://yoursite.com/page';
  $button = '<a href="'.$link.'" class="roll-button">Get a quote</a>';

  if ($args->theme_location == 'social') {
      $items .= '<li class="top-menu-cta">'.$button.'</li>';
  }
  return $items;

}

If you aren’t running a child theme, you can use a plugin that allows the same purpose like Functionality or Code Snippets.

Regards,
Kharis

Thanks Kharis, that worked a treat!

Can I also ask how I can change the colour of the button within this code rather than inheriting the theme colour.

Cheers,
Wayne.

Hello Wayne,

You can use this code:

.top-menu-cta a.roll-button {
  background-color: #f5a617;
  border: 1px solid #f5a617;
}

.top-menu-cta a.roll-button:hover {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
}

To apply it to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Superb again Kharis!

Thank you so much.

Wayne.

You’re welcome Wayne!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis