Breadcrumbs and Post Page Header Element issue

Hi there,

1. Add this CSS:

.page-hero .hero-meta {
    font-size: 14px;
}
.page-hero .hero-meta a:hover {
    text-decoration: underline;    
}

2. For you breadcrumbs, create a new Hook element, add the following HTML with the Yoast Breadcrumb Shortcode inside:

<div class="breadcrumb-bar">
    <div class="grid-container">
       Add your shortcode here
    </div>
</div>

And use the after_header hook.

Once its there i can help with some CSS.

Hello David, I have done the above process. Now what to do next to stick this hook element above the header element along with text size, background color, and text decoration.
I have ticked the option Execute Shortcodes. Is this Okay?

Hi there,

Now what to do next to stick this hook element above the header element along with text size, background color, and text decoration.

Set the Hook's priority value to 0.

The text size and other styling will have to be styled using custom CSS. :)

I have ticked the option Execute Shortcodes. Is this Okay?

Yes this is correct. You'll have to tick "Execute Shortcode" so yoast's shortcode can run.

I have done. What CSS do I need to make it awesome.

Now I want to make it 25px left and right align and top and bottom size 8px with background-color text and link color along with link text-decoration hover on underline.

Also, I want to make the text size 14px.

For the text size:

You can try this CSS

p#breadcrumbs {
    font-size: 16px !important;
margin-left: 20px;
}

The rest of the styling can be done on .main-breadcrumbs selector.

Example:

.main-breadcrumbs {
background-color: red;
padding: 8px;
}

And for its inner container, you can use .main-breadcrumbs .container {}

Sorry, Elvin both CSS is not working.

Please check this site to understand what I want with my breadcrumbs.

Ah I realized I inspected the wrong site. My bad. lol.

Try this:

For container background -

.breadcrumb-bar {
    background-color: red;
}

For text size -

.breadcrumb-bar span {
    font-size: 14px;
}

For setting margin if you want to move the whole breadcrumb text -

.breadcrumb-bar > .grid-container > span {
    margin-left: 50px;
}