About Page Heading

This topic has 11 replies, 2 voices, and was last updated 5 years, 2 months ago by FairFang730.

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

Author

Posts
September 17, 2019 at 2:43 am #144401

FairFang730
Participant

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.

September 17, 2019 at 8:45 am #144502
Elise Noromit
Member
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
September 17, 2019 at 12:04 pm #144580

FairFang730
Participant

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.

September 17, 2019 at 1:59 pm #144646
Elise Noromit
Member
Hello,

Replace the code to hide arrows:
```
body .basel-back-btn {
display:none;
}
```
Best Regards
September 17, 2019 at 2:45 pm #144671

FairFang730
Participant

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.

September 17, 2019 at 3:51 pm #144703
Elise Noromit
Member
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
September 17, 2019 at 10:01 pm #144751

FairFang730
Participant

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

September 17, 2019 at 11:42 pm #144759

FairFang730
Participant

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.

September 18, 2019 at 9:02 am #144839
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:
```
body .woocommerce-breadcrumb span.breadcrumb-last{
    display:none;
}
```
Best Regards
September 18, 2019 at 10:50 am #144868

FairFang730
Participant

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.

September 18, 2019 at 11:28 am #144885
Elise Noromit
Member
Hello,

Please, replace this code to the Theme Settings > Custom CSS > Global:
```
body.single .woocommerce-breadcrumb span.breadcrumb-last{
    display:none;
}
```
Best Regards
September 18, 2019 at 2:24 pm #144977

FairFang730
Participant

Thank you very much! issue has been fixed!
Author

Posts