Header not transparent using Twentig-Transparent Header

  • Resolved nrdgrl

    (@nrdgrl)


    5 years, 10 months ago

    The header is not transparent, or at least the top of my cover image is cut off. I’d like the image to align to the top of the window with the transparent header over it. What am I doing wrong? Thanks!!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Twentig

    (@twentig)

    5 years, 10 months ago

    Hi @nrdgrl,

    The issue is due to a CSS incompatibility with the Gravity Forms plugin. On your page, Gravity Forms injects a <style> tag as the first child of the content, just before the Cover block. Twentig sets the top margin of the first child to 0, but as this style tag is added, the top margin of the cover block isn’t reset.

    To fix your issue, either you manage to remove the style tag from the content. Or you can add some custom CSS. Inside the Customizer, open the Additional CSS panel and paste the following code:

    .tw-header-transparent .entry-content > .wp-block-cover.alignfull {
	margin-top: 0;
	padding-top: 14rem;
}
@media (min-width: 700px) {
	.tw-header-transparent .entry-content > .wp-block-cover.alignfull {
		padding-top: 16rem;
	}
}

    I hope the above is useful to you.

    If you enjoy Twentig, please leave us a review. 🙂

    Thread Starter nrdgrl

    (@nrdgrl)

    5 years, 10 months ago

    Thanks! Worked like a charm! 😊

    Plugin Author Twentig

    (@twentig)

    5 years, 10 months ago

    Great! Have a nice day.

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

The topic ‘Header not transparent using Twentig-Transparent Header’ is closed to new replies.