Button in header disappeared

Hello,

I wanted to have different menus on different pages and searching for a solution I came across with this topic

I installed the pluging and everything works fine, but the ‘KONTAKT’-button in the header somehow is gone. Is there a way to insert it again? That would be awesome!

before:

after:

Thanks in advanced.

Regards
Kruna

Hi Kruna,

Seems likely there is a bug with the plugin.

Alternatively, you may want to try adding the button manually with this PHP snippet.

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

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

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

    }

Add it to your child theme’s functions. Or you can use the Code Snippets plugin, in case you don’t have any child theme enabled.

Regards,
Kharis
aThemes Support

Hi Kharis,

thank you so much for your help.

I tried the code, but somehow it doesnt work.

Do you have an idea why?

TY and regards,
Kruna

Hello Kharis,

edit:
when I deactivated the plugin the button appeared.

regards
kruna

Hi Kruna,

Great! Glad to hear the button is showing.

Do you still need any help with this? Please let me know.

Regards,
Kharis
aThemes Support

Hello Kharis,

sorry there was a misunderstanding. The button still doesnt show, only when I diable the plugin ‘menu header’ again, but I would like the plugin to be activated and see the button.

regards
Kruna

Hi Kruna,

Try 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($) {

      'use strict'

      var menuButton = '<li class="header-custom-item"><a class="header-button roll-button" target="_blank" href="https://yoursite.com/page" title="Your Button">Your Button</a></li>';

      $('.mainnav ul.menu > li.header-custom-item').remove();

      $('.mainnav ul.menu').append(menuButton);

    })(jQuery);

Set your button URL by replacing https://yoursite.com/page; and set the button label by replacing Yout Button in the code above.

  1. Update

Clear cache before reloading your site.

Let me know how it goes.

Regards,
Kharis
aThemes Support

Hello Kharis,

yes, thats great, now it works perfectly!! TY very much for that.
There is only one thing I cant get resolved.
What now happens, is that the button is there, but the link is everywhere the same eg. in your code I entered
https://www.mysite/#kontakt
and the link leads to where it needs to.

When I go to another page like to
https://www.mysite.de/digital-media

the button shows still the link
https://www.mysite.de/#kontakt

but it should show

https://www.mysite.de/digital-media/#kontakt

I tried to duplicate the whole code, parts of the code, but I cant accomplish it.

Can you pls help me?

TY
regards,
Kruna

Hi Kruna,

Seems likely, as per your case, the link shouldn’t be a full address (https://www.mysite/#kontakt). But try only #kontakt instead.

Regards,
Kharis
aThemes Support

Hello Kharis,

yes that did it perfectly!! Thanks you so much for all your support!

regards
Kruna

You’re welcome Kruna!

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
aThemes Support