[Resolved] how to show and move breadcrumb under primary navigation

[Milo Lam]

Hi, I’m trying to achieve this look on my blog category page with a banner on the very top with the page title and the breadcrumbs. But for some reason my breadcrumbs are not showing.

[David]

Hi there,

can you share a link to your site so i can see what the issue is ?

And how have you added breacrumbs to your site?

[Milo Lam]

Hi David,
I have included the link in the private area.

So I haven’t added the breadcrumbs yet but I was going to via a shortcode generated by my SEO plugin. Now, there’s a much weirder problem for me in these areas before I get to it.

This part says the banner I made for the category archive this <header class=”page-header”></header> is a child of

. Based on the demo link above, it has to be on top/before the primary id div. How do I work around this?

Thank you!

[Elvin]

Hi Milo,

I believe this is what you want to achieve? https://share.getcloudapp.com/kpuDBW4Z

If your breadcrumbs is coming from a shortcode, you can place it within the Header Element you’ve created.

Place it right after the <h1> title tag.

[Milo Lam]

Hey Elvin,
Thanks for the response. Since the banner is part of the breadcrumbs section question, do you mind looking at the above problem for me as well?

Here is the link again for it. The banner I’m trying to have is not in the location and I don’t know what’s the best way to achieve it. A hook element?

Thank you!

[Elvin]

Are you pertaining to this part? https://share.getcloudapp.com/p9uAdeGd

It looks like the image has been hooked on generate_after_archive_description by something.

You can hook in your breadcrumbs the same way except it’s better to have the image positioned absolute instead of the title and the breadcrumbs.

[Milo Lam]

Hi, Elvin.
Yes that’s the one. Where do you suggest I hook the banner so that it’s similar to this?

[Elvin]

Yes that’s the one. Where do you suggest I hook the banner so that it’s similar to this?

If you want to copy that exact same look, what I recommend is to do create a Hero Section using the Header element.

But if you wish to push through with the current way you’re doing it, try creating a hook element containing your breadcrumb’s code and set the exact hook and display rule you’ve used for adding in the image banner. Just set a large priority number so it comes after the image.

After you’ve successfully added the breadcrumbs on it, let us know so we can re-inspect the page to help you out with the CSS writeup.

[Milo Lam]

Oh wow, big a-ha moment! The Header element is exactly what I needed. I was very silly to think I had to create a hook for each category page.

I think I can take care of the CSS after. That was very helpful, thank you!

[Elvin]

Glad to be of any help. No problem. 😀

[Author]

Posts