How to have breadcrumbs appear at the top of the pages

Hi,

I want to have breadcrumbs at the top of the pages.
I’ve installed the plugin “Breadcrumb NavXT”.
I also put the code that I found in the past post blow, but it did not work.
Can you please let me have the code to have breadcrumbs show up at the top of the pages?


<?php if(function_exists('bcn_display')) { bcn_display(); }?>
---

Thanks,

Hello there,

You can use the below PHP snippet to add to your child theme’s functions. Or, if you don’t have a child theme, you can use the Code Snippets plugin, which allows you to add functions to your site – the same way like child theme can do.

    add_action('sydney_after_hero', 'sydney_child_add_breadcrumb');
    function sydney_child_add_breadcrumb() {

      if(function_exists('bcn_display')) { 
        bcn_display(); 
      }

    }

I hope this reply helps.

Let us know in new topic for your other questions we can help with.

Regards,
Kharis
aThemes Support

Hi Kharis,

It worked fine!

Additionally, can you provide me with codes to change:

  1. the position of the breadcrumbs: I want to move it to right a bit.
  2. font size
  3. font color

Thank you and best regards,

Awesome!
You’re welcome!

We can add some CSS code to do those 3. So I need your page link that shows the breadcrumbs, so I can get the correct selector and code to suggest.

Regards,
Kharis
aThemes Support

Hi,

This is the link.

http://suzuki-akiko.com/カウンセリングとは/

I hope the link above works fine.

Regards,

Hello there,

Thank you for sharing the link.

As checked, the breadcrumbs is missing a DIV container that is usefule for specific styling to the breadcrumbs content. Hence, we need to add our own DIV by replacing the previous code with this one:

    add_action('sydney_after_hero', 'sydney_child_add_breadcrumb');
    function sydney_child_add_breadcrumb() {

      if(function_exists('bcn_display')) { 
        echo '<div class="site-breadcrumb container">';
        bcn_display(); 
        echo '</div>';
      }

    }

Once saved, then we can add the below CSS code to Additional CSS under the Appearance menu > Customize.

    .site-breadcrumb {
      font-size: 12px;
    }

    .site-breadcrumb,
    .site-breadcrumb a {
      color: #fff000;
    }

Regards,
Kharis
aThemes Support

Hi,

Unfortunately, I did not work.
After deleting the previous code, I copied the new code and tried to save, then I got the warming below:

Forbidden

The server refuse to browse the page.
The URL or value may not be correct. Please confirm the value.

TIME: 1603200591.953605 (2020-10-20 22:29:51 (+0900))
METHOD: POST
PATH_QUERY: /wp-admin/admin.php?page=add-snippet


Can you help?
Regards,