Hello,
Add the below CSS code to the Customize > Custom CSS section to fix it –
.page-header-title {
width: 50%;
float: left;
}
.site-breadcrumbs, .background-image-page-header .site-breadcrumbs {
text-align: right;
width: 50%;
float: right;
margin-top: 0;
}
@media only screen and (max-width: 767px) {
body.has-breadcrumbs .page-header-title {
width: 50%;
}
}
should I change the padding I added?
So i changed the padding and added a margin to the top. but it’s still not displaying correctly and the Image I am using is still showing opacity.
Ok Here is the code i added to css to get rid of opacity, display the background image the way I want on mobile, and fix the breadcrumbs and title. I decided to just get rid of the title completely. The issue I have now is on mobile. the breadcrumbs are way to far down the screen.
/** Header Changes **/
.page-header-title {
float: left;
margin-top:460px;
display:none;
}
.site-breadcrumbs, .background-image-page-header .site-breadcrumbs {
text-align: left;
float: left;
margin-top: 460px;
}
@media only screen and (max-width: 767px) {
body.has-breadcrumbs .page-header-title {
width: 50%;
}
}
.background-image-page-header-overlay {
opacity: 0;
}
@media only screen and (max-width: 767px) {
.background-image-page-header {
max-height:200px;
}
}
.content-area {
padding-top:20px;
}
/** End Header Changes **/
Can you add the below CSS code to the Customize > Custom CSS section –
@media only screen and (max-width: 580px) {
.site-breadcrumbs, .background-image-page-header .site-breadcrumbs {
margin-top: 260px;
}
}
Glad to hear that it worked!
