Shift up Header 6 title and meta

Posted in: Newsmag
Post count: 32
shiftanddrive
#38451
Feb 16, 2015 at 3:51 pm

Hey guys,

Looking to make one final customization before going live…

For the parallax header (Header 6, I believe), I want to shift the title and meta data up toward the menu, like this:

I’m able to demonstrate it here but it isn’t done in a way that’s responsive.

Could someone give me a tad bit of help?

Cheers,
Mark

Post count: 32
shiftanddrive
#38452
Feb 16, 2015 at 3:52 pm

Also, notice the “More” arrow goes along with the shift toward the top. I’d like that to stay at the bottom.

Post count: 6600
Lucian
#38471
Feb 16, 2015 at 5:13 pm

Hi,

Try this css: http://screencast.com/t/gcyR6NGr8q

.td-post-template-6 .td-post-header {
bottom: 370px;
}

.td-post-template-6 .td-read-down {
position: relative;
top: 400px;
}

Use @media queries to adjust it for mobiles an screen views:

* @media (max-width: 767px): for mobiles screens.
* @media (min-width: 768px) and (max-width: 1023px): for tablet screens.

Thanks

Post count: 32
shiftanddrive
#38480
Feb 16, 2015 at 6:12 pm

Thanks for the help!

When I did the solution above on my large-screen iMac, it looks perfect. But, on widescreen laptops with small vertical resolutions, it will get hidden behind the menu.

Is there a way to position this header text in relation to the top menu versus the bottom of the photo? I tried to use the CSS calc() function but no dice.

Cheers,
Mark

Post count: 6600
Lucian
#38547
Feb 17, 2015 at 12:56 pm

Hi,

Not sure how you could resolve that, the calc function could do it but you would need additional customizations for and tests. I suggest you get someone to help you with this.

Thanks

Viewing 5 posts - 1 through 5 (of 5 total)
The forum ‘Newsmag’ is closed to new topics and replies.