Community Forums › Forums › Archived Forums › Design Tips and Tricks › Infinity Pro – Header not transparent?
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.
-
AuthorPosts
-
November 29, 2016 at 10:05 am #196778
brightisland
ParticipantI'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/2017November 29, 2016 at 12:56 pm #196788Victor Font
ModeratorOnce 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 #197873healingthoughts
MemberIt 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 #198805pruningtogrow
MemberDid this issue ever become resolved? I would love to know the answer to this.
January 7, 2017 at 1:11 am #198916dsweeney0126
MemberI 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,
--DanJanuary 7, 2017 at 7:40 pm #198979PatriciaM
MemberThank 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 downHere 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 #198984dsweeney0126
MemberBoom! Thanks Patricia. That really helped.
December 31, 2019 at 3:44 pm #495710hilarync
ParticipantThanks Patricia! That worked perfectly.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.