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,

Hello there,

That “Forbidden” error is usually caused server incompatibility issue with the Code Snippets plugin. Check these requirements and ensure all meet in your current server setup. If you are unsure, you can contact your web hosting support department.

Regards,
Kharis
aThemes Support

Hello,

I got it.
Thank you anyway!

Regards,

Great!

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

There is no Breadcrumbs in your site here: https://www.ideasanimation.net/
Follow this post here: How to have breadcrumbs appear at the top of the pages

I works but it displays the breadcrumbs under the header, see this site:

Hello @hsahnoun,

I did a inspection in your website and can see the breadcrumbs below the header. That’s the expected behavior. Maybe you can apply some CSS style, so it will looks better. Please try adding the given custom CSS code below at Customize > Appearance > Additional CSS:

.site-breadcrumb {
	margin-top: 35px;
}

We hope this helps!

Regarding the website https://www.ideasanimation.net/, it’s not using the Sydney theme.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support