About Page Heading

About the page heading.
The picture below shows the page heading displayed on the mobile phone. I want to know how to delete this arrow and show the breadcrumbs.
And how to adjust the height of the page heading？

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

/*to show breadcrumbs on mobile*/
@media (max-width: 991px){
body .single-breadcrumbs-wrapper .woocommerce-breadcrumb, .single-breadcrumbs-wrapper .yoast-breadcrumb {
    display: block;
	}
}

to the Theme Settings > Custom CSS > Moile:

/*to hide arrows*/
body .xbs-staff-panel {
    top: auto;
    right: 70px;
	bottom:20px;
}
body .mobile-nav .searchform {
background-color:green;
}

The height of the wrapper is changed by means of paddings:

body .single-breadcrumbs-wrapper {
    padding-top: 5px;
    padding-bottom: 5px;
}

Change both paddings as per your needs and add this code to the Theme Settings > Custom CSS > Global.

Best Regards

Thank you for your answer, I added this code. Breadcrumbs have been successfully displayed. But the arrow is still there.

Attachments:

You must be logged in to view attached files.

Hello,

Replace the code to hide arrows:

body .basel-back-btn {
display:none;
}

Best Regards

Thank you very much. The arrow is gone. There is another question how to make the breadcrumbs centered?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .header-full-width .single-breadcrumbs-wrapper>.container{
	    text-align: center;
}

Best Regards

they didn’t work, the breadcrumbs still left on mobile.

Breadcrumbs are now centered.
The question now is how to make the product title not appear in the breadcrumbs?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .woocommerce-breadcrumb span.breadcrumb-last{
    display:none;
}

Best Regards

I added this code. This can cause the breadcrumbs on other pages to be incomplete. I just want the breadcrumbs on the product page not to display the product title.

Hello,

Please, replace this code to the Theme Settings > Custom CSS > Global:

body.single .woocommerce-breadcrumb span.breadcrumb-last{
    display:none;
}

Best Regards

Thank you very much! issue has been fixed!

[Author]

Posts