Infinity Pro – Header not transparent?

This topic is: not resolved

Tagged: css, Infinity Pro, Logo, stylesheet, transparent

This topic has 7 replies, 7 voices, and was last updated 3 years, 5 months ago by hilarync.

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

Author

Posts
November 29, 2016 at 10:05 am #196778

brightisland
Participant

I've just installed Infinity Pro to help me give this site a makeover, but I can't figure out why the header isn't transparent. The only tweak I did of the css was to float:right the header menu.

Thanks in advance. 🙂

ETA: Coming Soon plugin is in place so let me know if site isn't accessible with backdoor link.
http://www.gracechurchcc.com/2017

November 29, 2016 at 12:56 pm #196788

Victor Font
Moderator

Once you add the image to the header, it uses a different CSS block. It is using the .header-image.front-page .site-header CSS in style-front.css at line 15. This overrides .front-page .site-header, which has the transparent background, at line 10 in the same file. If you want to keep the header transparent, add the !important keyword in the background declaration in the line 10 code.

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

December 20, 2016 at 5:28 am #197873

healingthoughts
Member

It does not work for me

I did the following:

original:
.front-page .site-header {
background-color: transparent;
border-bottom: 1px solid transparent;
}

.front-page .white .site-header,
.header-image.front-page .site-header {
background-color: #fff;
border-bottom: 1px solid #eee;

modified:
.front-page .site-header {
background-color: transparent !important;
border-bottom: 1px solid transparent;
}

.front-page .white .site-header,
.header-image.front-page .site-header {
background-color: #fff;
border-bottom: 1px solid #eee;

It is this what you suggest?

Additional information:
Whatever I do change in these two css there is no effect on startpage.

What am I doing wrong?

January 5, 2017 at 2:46 pm #198805

pruningtogrow
Member

Did this issue ever become resolved? I would love to know the answer to this.

January 7, 2017 at 1:11 am #198916

dsweeney0126
Member

I was able to get Victor's suggestion to work for me.

Wondering if anyone has had luck changing the header back to white on the scroll down. Can't seem to solve that one. Any help would be greatly appreciated!

Cheers,
--Dan

January 7, 2017 at 7:40 pm #198979

PatriciaM
Member

Thank you @VictorFont for the explanation and advice!

I've been trying to figure this out myself, and I think I've finally got both pieces of the puzzle:

1. Transparent background for site header on front page when using a logo (header image)
2. White background for site header on front page when scrolling down

Here is the CSS I used in the style-front.css

.front-page .site-header,
.header-image.front-page .site-header {
background-color: transparent;
border-bottom: 1px solid #a8a8a8;
}

.front-page .white .site-header {
background-color: #fff !important;
border-bottom: 1px solid #eee;
}

Note: I left the "border-bottom" line on the transparency because I like the look. But if you don't want a line then just put "transparent" there, too.

p.s. If you don't see the changes immediately, remember to clear your cache before refreshing. Sometimes I forget this step and I wonder why my code isn't showing up. 😛

January 7, 2017 at 9:35 pm #198984

dsweeney0126
Member

Boom! Thanks Patricia. That really helped.

December 31, 2019 at 3:44 pm #495710

hilarync
Participant

Thanks Patricia! That worked perfectly.
Author

Posts