Community Forums › Forums › Archived Forums › General Discussion › Infinity Pro – Homepage Menu goes white with logo
Tagged: image in title, Infinity Pro, menu, nav menu
- This topic has 11 replies, 9 voices, and was last updated 5 years ago by levanquyen.
-
AuthorPosts
-
January 18, 2017 at 1:37 pm #199623AccentwebMember
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.comJanuary 25, 2017 at 1:31 pm #200020tubbwellMemberI 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;
}January 26, 2017 at 7:05 pm #200097shangoMemberI'm also looking for the answer to this one. Hope somebody chimes in with some help here.
January 27, 2017 at 8:02 am #200118Victor FontModeratorThe 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?January 27, 2017 at 1:33 pm #200138shangoMemberThank 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; }
February 15, 2017 at 6:36 pm #201268forum21MemberThis 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;March 28, 2017 at 8:53 pm #203981ndrake55ParticipantWhat if I want the text to start off white then turn black when you scroll?
October 8, 2019 at 8:25 am #493923jimbo5ParticipantThis is not working for me. The logo is still with white.
October 10, 2019 at 5:57 am #493947IsabellaSmithParticipantI can see this is an old thread, but is there still no solution to the problem?
October 10, 2019 at 7:29 am #493951jimbo5ParticipantNot for me 😉
October 13, 2019 at 5:24 am #493978levanquyenMemberOctober 13, 2019 at 5:25 am #493979levanquyenMember -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.