Infinity Pro – Homepage Menu goes white with logo

[AccentwebParticipant]

On the infinity pro theme on the homepage the menu goes transparent and then turns white once you scroll past .front-page-1. After I inserted a logo instead of using the default text setting the background goes to white full time. I would prefer it acted the same way as when there is text in the title area while there is a logo in there as well. IE It remains transparent with color changes to the nav menu items while there is an image in the title area.

Idea's?

Thanks.

ps. the link isn't to my site, the site is on a development server, offline.

https://www.siteisntlive.com

[tubbwellParticipant]

I am looking for an answer to this as well. If I adjust the CSS to make the background transparent, then it stays transparent even on scroll. I'd like the background to stay white on scroll and transparent when static.

To have a transparent background in the header, including when scrolling, locate the below CSS code in the style-front.css file of the theme:

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

Adjust it to:

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

[shangoParticipant]

I'm also looking for the answer to this one. Hope somebody chimes in with some help here.

[Victor FontModerator]

The white in Infinity Pro is controlled by the following jQuery that can be seen in global.js:

// Add white class to site container after 50px.
$(document).on( 'scroll', function() {

	if ( $(document).scrollTop() > 50 ) {
		$( '.site-container' ).addClass( 'white' );

	} else {
		$( '.site-container' ).removeClass( 'white' );
	}

});

What this code does is add the white CSS class to the site-container after the document is scrolled more than 50px. The jQuery in this file also repositions site-inner and site-header based on the various dimensions. I haven't tested this, but I suspect the height adjustments are causing the scroll to trigger adding the white class to the site-container.

When the image is added to the header, the min-height of the header is 65px. The first thing I would do is increase the > 50 in the above code to > 75 and see if that works,

---

Regards,

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

[shangoParticipant]

Thank you Victor. I had searched that js file, hoping to see a reference to header-image. Shoulda taken the time to read the js. I'm glad you were on to it.
Although, the "white" class is only add to the markup upon scrolling. So the white background that happens when a header image is added is a css issue that i finally see.

css/style-front.css
I removed the .header-image from the rule that colors the bg white.
Then I swapped the order of these 2 rules so It looks like this:

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

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

[forum21Participant]

This may be resolved but I wanted to share. I had reached out to the Studiopress Support a couple of months ago on this issue and this was what they sent. It worked for me:

--------------

To make home page's header transparent, same as it's without header image, you'll need to make following change in theme's "style-front.css" file:
(You can locate this file at "wp-content/themes/infinity-pro/style-front.css" on your web hosting and to edit it, can use hosting account's file editor, any FTP program or WordPress's file editor in admin -> Appearance -> Editor)

At line# 16, you'll have:

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

Please replace it with:

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

[ndrake55Participant]

What if I want the text to start off white then turn black when you scroll?

[jimbo5Participant]

This is not working for me. The logo is still with white.

[IsabellaSmithParticipant]

I can see this is an old thread, but is there still no solution to the problem?

[jimbo5Participant]

Not for me 😉

[levanquyenParticipant]

Help me!

[levanquyenParticipant]

link to facebook

[Author]

Posts