Adding call-to-action buttons to the header of the website above primary menu

• 

  geotabsouthafrica · Member · Mar 17, 2017 at 11:13 am

  • Copy link
  • Add topic to favorites

  Hello!

  Can call to action buttons like ‘click to call’ or ‘request a demo’ be added to the header of the Fortune Theme, not the header image?

  Website: https://geotabafrica.com/

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 17, 2017 at 8:28 pm

  • Copy link

  Hi there, have a look at our Call to Action support page which explains about making your own call to action button. What you would want to do is to add it to a Text Widget in the footer widget area and then let me know and I can work out the code to move it to the header area for you.

• 

  geotabsouthafrica · Member · Mar 20, 2017 at 7:37 am

  • Copy link

  Good morning, I have implemented the above as per your instructions. Unfortunately the button are coming out as links. Please advise on the code that is missing for them to render as buttons?

  Many thanks!

• 

  thesacredpath · Member · Mar 20, 2017 at 7:08 pm

  • Copy link

  Hi, are you talking about the link in your Contact Us text widget? If so, we would need to include either some inline styling in the button code in the text widget, or add some custom CSS for the “button” CSS class. Let’s do the latter. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and you can adjust the color and other values I’ve used in my example code as desired.

  .button {
    background-color: #2800ff;
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 4px;
  }

  On the padding, the 5px is the top/bottom padding and the 10px is the left/right padding.

• 

  geotabsouthafrica · Member · Mar 22, 2017 at 2:05 pm

  • Copy link

  Thank you very much!

• 

  thesacredpath · Member · Mar 23, 2017 at 12:00 am

  • Copy link

  You are welcome.