• 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

Same Infinitu menu feature/behavior in Atmosphere Theme

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 › Design Tips and Tricks › Same Infinitu menu feature/behavior in Atmosphere Theme

This topic is: not resolved
  • This topic has 5 replies, 4 voices, and was last updated 5 years, 1 month ago by mike12.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 13, 2017 at 4:06 am #202980
    panatan
    Participant

    Hi all !

    I would like to know if it could be possible to have Infinity (header) navmenu behavior/feature in Atmosphere theme ?

    I would like to have sticky menu+Transparent background & sticky menu+Opacity background on screen scroll ?

    Is it via javascript or only css ?
    Thank you and sorry for my poor English :/

    May 31, 2017 at 11:38 am #207229
    mike12
    Blocked

    Hi Panatan,

    I'm looking to do the same thing. Did you ever find the solution? Thanks!

    June 1, 2017 at 7:43 am #207254
    Victor Font
    Moderator

    This is done with a combination of CSS and jQuery. The white that shows up when you scroll the page is handled by jQuery:

    // 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' );
    		}
    
    	});

    The rest is all CSS. You'll find the CSS in both style.css and /css/style-front.css in the Infinity Pro child theme folder. If you don't have access to Infinity Pro, you can use your browser's inspect tool to derive the CSS from the demo: https://victorfont.com/how-to-use-your-browsers-inspect-tool/


    Regards,

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

    June 19, 2017 at 4:28 pm #207954
    mike12
    Blocked

    Thanks Victor!

    In the Infinity Pro theme there is a global.js file where the above code is found. However, in the Atmosphere pro theme there is no such file, so I created a global.js and added in the code and copied the CSS code.

    It seems to be transparent now, but the white class is taking hold.

    Any suggestions are much appreciated! Thanks

    http://dev.sarahperfectsgranola.com

    June 20, 2017 at 6:29 pm #208008
    ᴅᴀᴠɪᴅ
    Member

    You need to enqueue the js file that you have created inside the theme's functions.php file.

    Also, I looked in your style.css and I could not find the CSS that would make the header change color on scroll.

    It will be something like this...

    .site-container.white .site-header {
         background-color: white;
    }

    so when the white class is added to site-container (which is what your global.js file does) then the site header will have a white background.


    I love helping creative entrepreneurs build epic things with WP & Genesis.

    Follow on Twitter

    June 21, 2017 at 12:43 pm #208041
    mike12
    Blocked

    Thanks Dave!

    I didn't enque the script before. I followed the instructions from that link you posted to enque the global.js file within functions and I have this css code to add the white from the Infinity Pro theme.

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

    Still not catching for some reason.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ 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

© 2022 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