Support » Theme: Blossom Shop » Removing Banner Slider from Blog Page

  • Resolved starlinggirl

    (@starlinggirl)


    Hello!

    I would like to remove the banner slider from our designated blog page. Is this possible?

    Thank you!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi

    To remove the slider from the blog page, add below code in Additional CSS via Admin Dashboard > Appearance > Customize > Additional CSS.

    .blog .site-banner.banner-five {
        display: none;
    }
    Thread Starter starlinggirl

    (@starlinggirl)

    Thank you!

    Thread Starter starlinggirl

    (@starlinggirl)

    Is there a snippet to add the image header with centered title – like my contact page and about pages?

    Also, I want the same header on my shop pages, but the image container is MUCH larger (232px vs 500px), and the title is left aligned. Can I change this to match the other pages? I would like every page, except the home page, to have a consistent look with the 1920 x 232 header image with centered white text.

    Thank you!

    Hi @starlinggirl,

    We do not have the feature to display page title and header image on the blog page.

    To decrease the height of the header image and center align the title of the page, add below code in Additional CSS via Admin Dashboard > Appearance > Customize > Additional CSS.

    .woocommerce-page .site-content > .page-header.has-bgimg {
        min-height: 288px;
    }
    
    .woocommerce-page .site-content > .page-header.has-bgimg .page-title {
        text-align: center;
    } 
    Thread Starter starlinggirl

    (@starlinggirl)

    Sadly, these snippets did not work. Here is the page I am trying to change: https://www.grbbells.com/shop/

    I would like the size and title centering to match this page:
    https://www.grbbells.com/about/

    Thank you!

    Blossom Themes Support

    (@blossomthemessupport)

    Hi starlinggirl,

    You can add the below code instead.

    .woocommerce .site-content > .page-header {
        padding: 96px 0 !important;
        min-height: 270px !important;
    }

    This is how the header should look like after adding the code, screenshot-https://prnt.sc/xyhar3

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.