Additional buttons on home page

Hi,

I already read a lot of topics about this (from other themes), but I don’t manage to create extra buttons on the homepage.

Now I have just one with ‘Contact’, but I want 3 buttons.
I just want a clear explanation, according to the astrid theme.

My website: https://www.fertilitybelgium.be

Thanks!
Charlien

Hello Charlien,

The current version only provide a header button. To add two more, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      if( $('.header-button').length ) {

        var buttonLink2 = {
          link: 'http://yoursite.com/page2',
          text: 'Button 2'
        };

        var buttonLink3 = {
          link: 'http://yoursite.com/page3',
          text: 'Button 3'
        };

        $('.header-info .container').append('<a class="button header-button header-button2" href="' + buttonLink2.link + '">' + buttonLink2.text + '</a>');
        $('.header-info .container').append('<a class="button header-button header-button3" href="' + buttonLink3.link + '">' + buttonLink3.text + '</a>');

      }


    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-info .header-button {
      display: inline-block;
      margin-left: 3px;
      margin-right: 3px;
      margin-top: 15px;
    }

Clear any applied caches. Otherwise the new code additions won’t take any effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi Kharis,

Thanks a lot!!

I have 1 more question regarding the buttons: I want to change the padding between the text of the button and the border + change background/text color of the buttons.

At this moment they are not visible on mobile, maybe this will be fixed if the padding of the border is less.

Regards,
Charlien

Hello Charlien,

Please try adding this extra CSS code:

@media only screen and (max-width: 500px) {
  .header-info .header-button {
    padding: 5px 8px;
    color: #ff0000;
    border-color: #ff0000;
    margin-top: 8px;
  }

  .header-info .header-button:hover {
    color: #fff;
    background-color: #ff0000;
  }
}

Adjust the hex color code to meet your need.

Regards,
Kharis

Thanks! Problem solved :slight_smile:

You’re welcome!

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