Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #199910

    Hi – I am having an issue where my single product (product details) page is pushed up under the menu. On the other pages in my site I am using a full-width layer slider, which by design slides up under the menu, but I read another post that I cannot use that on the single product page.

    My 2 questions here are:
    Is it possible to use a static image in the header on the single product page?
    If not, how can I push the content down on the page?

    I have tried using the following to push the content down

    .single-product .template-shop {
    padding-top: 110px !important;
    }

    but that did not work (although it does work in Firebug).

    You can see the site by clicking here
    If you click on the product and go to the details page you’ll see my issue.

    Thanks!
    John

    #200142

    Hi sundialstudios!

    Where did you put the css that it wasn’t working? The theme already has a bit of padding added in for the single product pages so the following should work as well:

    #top.single-product .template-shop {
    padding-top: 110px;
    }

    Even without the !important declaration. If it doesn’t, leave it in and let us know again so we can see whats taking priority over it.

    Cheers!
    Devin

    #200253

    Thanks Devin – I don’t think I put the #top in there before because adding that worked.

    Is there a way to add a static image to the header in the single product pages? I’m using a full-width layer slider in the header on all the other pages, and since I can’t do that on the single-product page I was wondering if I can just use a static image on the product details page to give me a similar look.

    Thanks!
    John

    #200317

    Hi!

    You can try this. We will use the title container. Edit the product then look for Layout > Header Settings > enable the header. Add this on Quick CSS to hide the title and breadcrumb:

    .single-product .main-title.entry-title, .single-product .breadcrumb {
    display: none;
    }

    You can then add an image background on the title container for single product pages only.

    .single-product .stretch_full.container_wrap {
    background: url('http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 300px;
    }

    You can adjust the height. Change the background image url.

    Cheers!
    Ismael

    #200470

    Ismael – you rock! That’s exactly what I was looking for!

    There isn’t another company out there that has as good of support and assistance as you guys have! I really appreciate the help!

    Thanks,
    John

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

The topic ‘Single Product (Product Details) Page Header’ is closed to new replies.