Topic: Mellow template: adding breadcrumbs

tfbpa
February 6, 2024 at 2:06 pm

Hi,

I would like to add breadcrumbs to my Mellow template website, but am having difficulties figuring out both how to add them and where.

It seems the Mellow template does not have a good out-of-the-box section where breadcrumbs can be placed and I would like to ask if you perhaps have any ideas where to place them and if so, where to put the code.

I would like to have breadcrumbs on all pages except the homepage. Most important for me are the category pages and the posts themselves and they should be in the same place for both.

Perhaps bottom of the pages is the least worse option, but I am hoping that you have any brilliant ideas 😀

Thanks to let me know.
Leo
February 6, 2024 at 2:07 pm

Hi there,

Can you take a look at this article and see if it helps?
https://docs.generatepress.com/article/adding-breadcrumbs/

Let me know 🙂
tfbpa
February 7, 2024 at 2:15 am

Thanks Leo, it did help.

I got the breadcrumbs for the Posts in the correct location by using hook generate_before_content. This looks OK.

But the breadcrumbs on Archives is impossible to make it look nice. Unfortunately the theme design cannot display breadcrumbs in a good looking way. I tried every hook available, but none of them look nice. Bummer, but since it is a theme design issue, nothing can be done about that.

I do have a question regarding SEO though.

For SEO purposes, is it handy/necessary to also have breadcrumbs on Archives if the breadcrumbs already exist on Posts?

Normally breadcrumbs are used for both humans and bots so they know on which page they are, understand the hierarchy and can easily navigate and understand the website.

What happens if breadcrumbs are only used on the single posts? Does this confuse bots and/or messes up their understanding of the hierarchy or doesn’t it matter?

If it does matter for the bots understanding, it is possible to display the breadcrumbs somewhere before the footer. Humans will never see it down below, but at least the Schema code is in the source so bots can read it.

But since the Schema code/breadcrumbs are in different places on posts and archives, perhaps this is also seen as a negative by bots as perhaps they think it is bad design and confusing for humans?

I understand that SEO is not really related to your line of business, same as breadcrumbs are not part of your themes, but perhaps you do know.

Thanks again.
David
February 7, 2024 at 4:34 am

Hi there,

can i see the problem with the breadcrumb on the archives?
It kinda sounds the best fix would be to make them look as you need. And i am sure we can help with that.
tfbpa
February 7, 2024 at 7:41 am

Hi David,

the problem is that even in pure theory I don’t see what a good location would be for breadcrumbs in this theme on archives/category pages.

For the posts I like the location where it is now, see ** deleted **

The least worse breadcrumb location on archives/categories is probably at the bottom of the Hero picture, as I have tried here, ** deleted **

The problem with that is that the breadcrumbs are not clickable for some reason and the layout of the posts displayed is being pushed down, which makes the theme look less nice.

But in general I don’t really like to have the breadcrumbs inside the Hero image, as it distracts from the image, which is a big part of my travel images website that I want to create.

But perhaps you have an idea where to place them?

And if you know, an answer to my SEO question would also be appreciated.

Thanks again.
David
February 7, 2024 at 8:09 am
Ok. the non-clickable issue is because of the negative margins used to overlap the content with the hero.
To fix that, in Customizer > Additional CSS look for:
```
.page-hero + #page {
    margin-top: -100px;
    position: relative;
}
```
And change it to:
```
.page-hero + #page {
    margin-top: -100px;
    position: relative;
    z-index: 1;
}
```
Alternative positions for the breadcrumb could be within the hero either before or after the title.

SEO wise, its not my field of expertise; but from general reading; SEO guys rank Breadcrumbs a lot both for the SERPs and human navigation. Personally i like consistency in my UIs, and if the breadcrumb is useful then losing them on a sub-category archive would be slightly annoying.
tfbpa
February 7, 2024 at 9:18 am

Thanks again David, links are now clickable.

And actually, breadcrumb before_entry_title might work, if you can help me out again.

At the moment the breadcrumbs are displayed on the archive/category pages as many times as there are posts within the specific category. This is of course the normal, correct behaviour.

For my purpose, it should only be displayed one time, on the first post of that category.

If such is possible, then the breadcrumbs visibly stay somewhat in the same spot and are displayed where and when I want them.

Please let me know if such is possible and to see what I mean that the breadcrumb is displayed multiple times, see ** deleted **

Thanks again.

Ying

February 7, 2024 at 11:38 am

Try this CSS:

.archive .post:not(:first-of-type) .fbc.fbc-page {
    opacity: 0;
    pointer-events:none;
}

tfbpa
February 7, 2024 at 12:12 pm

Very cool, works like a charm and I’m very happy 😀

Want to say that all three of you give amazing support, very fast and above and beyond what I expected!

Thank you all.
Ying
February 7, 2024 at 12:19 pm

No Problem, glad to help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Mellow template: adding breadcrumbs