Page Title

  • I am Trying to get the page title to show on the left and the breadcrumbs on the right. I had to use a crazy amount of padding to get the title to show below the header. And then the breadcrumbs still show below that. I took a screen shot of my current settings in customizer and attached that to the page I just submitted. Also I do not want this overlay opacity. I just want the image that I am using for the header. I changed the settings on that and it still shows up with some sort of overlay.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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%;
}
}
    Thread Starter bline007

    (@bline007)

    should I change the padding I added?

    Thread Starter bline007

    (@bline007)

    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.

    Thread Starter bline007

    (@bline007)

    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;
}
}
    Thread Starter bline007

    (@bline007)

    that did it

    Glad to hear that it worked!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Page Title’ is closed to new replies.