Multiple header buttons

Dear,
How to get six header buttons instead of 2 ?

Kind Regards,

Kevin

Hello there,

Based on the screenshot you shared above. It looks like you’re using West theme. To add some more extra buttons on West’s header, 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($){

      var buttons_1 = '<a class="button header-button left-button" href="http://yoursite.com/page1">Button 1</a>';
      var buttons_2 = '<a class="button header-button right-button last" href="http://yoursite.com/page2">Button 2</a>';
      var buttons_5 = '<a class="button header-button left-button first" href="http://yoursite.com/page5">Button 5</a>';
      var buttons_6 = '<a class="button header-button right-button" href="http://yoursite.com/page6">Button 6</a>';

      var left_buttons = buttons_1 + buttons_2;
      var right_buttons = buttons_5 + buttons_6;

      $('.header-buttons').prepend(left_buttons).append(right_buttons);

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .right-button.last {
      margin-right: 30px;
    }

    .left-button.first {
      margin-left: 30px;
    }

For other West theme related questions, please post in this channel: https://forums.athemes.com/c/west

Regards,
Kharis

Dear Kharis,

Thankyou for the code provided, now it is on all the pages, I need the settings only for the homepage.
www.eengezondebasis.nl

Kind Regards,

Kevin

  (function($){

  var buttons_1 = '<a class="button header-button left-button" href="http://yoursite.com/page1">Button 1</a>';
  var buttons_2 = '<a class="button header-button right-button last" href="http://yoursite.com/page2">Button 2</a>';
  var buttons_5 = '<a class="button header-button left-button first" href="http://yoursite.com/page5">Button 5</a>';
  var buttons_6 = '<a class="button header-button right-button" href="http://yoursite.com/page6">Button 6</a>';

  var left_buttons = buttons_1 + buttons_2;
  var right_buttons = buttons_5 + buttons_6;

  $('.header-buttons').prepend(left_buttons).append(right_buttons);

})(jQuery);

Hello there,

Try replacing this line:

  $('.header-buttons').prepend(left_buttons).append(right_buttons);

with:

  if( $('body').hasClass('home') ) {
    $('.header-buttons').prepend(left_buttons).append(right_buttons);
  }

Regards,
Kharis

1 Like

Dear Kharis,

Thank you !

Kind Regards,

Kevin

You’re welcome Kevin!

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

1 Like