ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Cardinal
• March 10, 2016 at 7:14 am #254566
  George

  Member

  Post count: 235

  Hey Ed and team,

  I’m looking at trying to make the body or first content row of my page (with text blocks etc) overlap my header image, either a single image or revolution slider.

  The aim is like this page: https://www.eventbrite.com.au/e/world-plumbing-day-2016-tickets-21246915095?aff=ehomecard

  Is this possible?

  Attached screenshot as well.

  Thank you in advance,

  George

  Attachments:

  You must be logged in to view attached files.
  March 10, 2016 at 9:43 am #254594
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  This depends on the page, are you refering to just this page?

  https://events.com.au/amazing-sports-safari/

  If so are you looking to have those page navigation tabs within the hero?

  Thanks,

  March 11, 2016 at 1:29 am #254838
  George

  Member

  Post count: 235

  Hi Dave,

  I would want it to be on all my product posts, which I create using a standard post template. The one above is just an example of a product/tour.

  I would ideally put a few pieces on info in the overlapped bit over the hero image, i.e. price, dates, location.

  Or the floating navigation tabs, but I could make that sit below it within the full width body, i’m assuming that’ll be easier.

  Thank you for the reply.

  Kind regards George.

  March 14, 2016 at 1:12 pm #255222
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Have you set that section up in your post? I’ll see if I can add some custom css for you

  – Kyle

  March 14, 2016 at 10:36 pm #255392
  George

  Member

  Post count: 235

  Hey Kyle,

  I’ve set up a new row with columns for the info above the custom nav bar on the page: https://events.com.au/amazing-sports-safari/

  This is the row that would be awesome if it overlapped from my example: https://www.eventbrite.com.au/e/world-plumbing-day-2016-tickets-21246915095?aff=ehomecard

  Thank you,

  George.

  March 15, 2016 at 11:01 am #255470
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .spb-row-container.overlap .container {
    background-color: #ffffff;
    margin-top: -100px;
    padding: 20px 50px 10px;
  }
  .spb-row-container.overlap {
    background: transparent none repeat scroll 0 0 !important;
  }

  You’ll need to add the extra class ‘overlap’ to the row. Also remove the padding in the row

  – Kyle

  March 16, 2016 at 1:24 am #255699
  George

  Member

  Post count: 235

  Hi kyle,

  that works perfectly thank you.

  I just need to add a line at the bottom to seperate it. Divider’s don’t work properly with some margin with the divider in the row or below the row and bottom-border etc. isn’t quite working either.

  Thank you,

  George

  March 16, 2016 at 8:55 am #255714
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Change the css to:

  .spb-row-container.overlap .container {
    background-color: #ffffff;
    border-bottom: 1px solid #efefef;
    margin-top: -107px;
    padding: 20px 50px 10px;
  }

  – Kyle

• Back to forum

  Posted in: Cardinal