Multiple header buttons


#1

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

Kind Regards,

Kevin


#2

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


#3

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);

#4

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


#5

Dear Kharis,

Thank you !

Kind Regards,

Kevin


#6

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