• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Infinity Pro – Homepage Menu goes white with logo

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Infinity Pro – Homepage Menu goes white with logo

This topic is: not resolved

Tagged: image in title, Infinity Pro, menu, nav menu

  • This topic has 11 replies, 9 voices, and was last updated 5 years, 9 months ago by levanquyen.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 18, 2017 at 1:37 pm #199623
    Accentweb
    Member

    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
    January 25, 2017 at 1:31 pm #200020
    tubbwell
    Member

    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;
    }

    January 26, 2017 at 7:05 pm #200097
    shango
    Member

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

    January 27, 2017 at 8:02 am #200118
    Victor Font
    Moderator

    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?

    January 27, 2017 at 1:33 pm #200138
    shango
    Member

    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;
    }
    
    February 15, 2017 at 6:36 pm #201268
    forum21
    Member

    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;

    March 28, 2017 at 8:53 pm #203981
    ndrake55
    Participant

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

    October 8, 2019 at 8:25 am #493923
    jimbo5
    Participant

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

    October 10, 2019 at 5:57 am #493947
    IsabellaSmith
    Participant

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

    October 10, 2019 at 7:29 am #493951
    jimbo5
    Participant

    Not for me 😉

    October 13, 2019 at 5:24 am #493978
    levanquyen
    Member


    Help me!

    October 13, 2019 at 5:25 am #493979
    levanquyen
    Member

    link to facebook

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble