Aligning breadcrumbs vertically in the middle

Hi,

I’m having some problem with aligning breadcrumbs vertically. I changed the style of breadcrumbs. My breadcrumbs only show the current position. I hided page title also.

Page label is positioned at top and post name is positioned little below from the top for desktop. In mobile, page label shows in the middle. post name is at bottom.

I’ve tried to change css codes as below,

.x-header-landmark { background: #4a34a1; padding-top: 0; padding-bottom: 0; height: 50px; }
.x-landmark { width: auto; padding-right: 0; float: right; }
.x-breadcrumbs-wrap { width: auto; text-align: center; }
.x-breadcrumbs {font-size: 130%; }
.x-breadcrumbs a, .x-breadcrumbs span, .x-breadcrumbs .current { color: white; }
.entry-title { display: none; padding-top: 0; padding-bottom: 0; }

How can I fix this?

Thank you for your supports.

Hi @SupK,

To assist you with this issue, we’ll first need you to provide us with your page’s URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist.

Thank you.

These are the urls.

Thank you.

Hi there,

Please update this code:

.x-header-landmark {
    background: #4a34a1;
    padding-top: 0;
    padding-bottom: 0;
    height: 50px;
}

to

.x-header-landmark {
    background: #4a34a1;
    padding: 12px 0px 13px;
}

Hope this helps.

Hi Jade,

Are the sizes of fonts for page and blog post title different? Page title looks in the middle. However, blog title is still positioned little bit lower from the middle.

Also I have problems in mobile. Blog post title disappears in mobile. Page title is close to the bottom.

Thank you.

Hi there,

Please add this CSS:

.x-landmark-breadcrumbs-wrap .x-landmark {
    display: none;
}

@media (max-width: 767px) {
    .x-breadcrumbs-wrap {
        margin-top: 0;
    }
}

Hope this helps.

Hi Jade,

It looks well aligned in the middle.

Thank you so much.

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.