Transparent Sticky Header, stat stays transparent

  • Resolved vvpacc

    (@vvpacc)


    4 years ago

    Hey there,

    I love twentig! It’s amazing. There are a few things missing, but nothing too major.

    I want my header to me both sticky and transparent. How can this be done? I tried through the header menu and all, but did not manage. I guess this option is not available by default, and the sticky header, even if transparent with scrolling down it always gets a color.

    I went through the CSS code, i believe it inherits the color, but do not know my around the code too much – I can find it and edit it if needed, but cant.

    If it matters, I use transparent header light as a document setting.

    BR.

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

    (@twentig)

    Hi @vvpacc,

    Thanks for your message. When the user scrolls down, Twentig applies an “opaque” class to the body (using some JavaScript code) so that the header content can still be visible. To keep the header always transparent, you can add the CSS code below inside the Customizer’s Additional CSS panel:

    .overlay-header.has-header-opaque #site-header {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

.overlay-header.has-header-opaque #site-header .header-inner,
.overlay-header.has-header-opaque #site-header .header-inner * {
	color: #fff;
}

.overlay-header.has-header-opaque .logo-primary {
	visibility: hidden;
}

.overlay-header.has-header-opaque .logo-primary + .logo-transparent {
	visibility: visible;
	opacity: 1;
}

    I hope the above is useful to you,
    If you enjoy Twentig, please leave us a review ??

    Thread Starter vvpacc

    (@vvpacc)

    Thank you. Worked like a charm!

    A postive review is coming. I hope you guys keep the good work for the future and coming themes too!

    Plugin Author Twentig

    (@twentig)

    Hi @vvpacc,
    Great! Have a nice day.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transparent Sticky Header, stat stays transparent’ is closed to new replies.