Same Infinitu menu feature/behavior in Atmosphere Theme

[panatan]

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 :/

[mike12]

Hi Panatan,

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

[Victor Font]

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?

[mike12]

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

[ᴅᴀᴠɪᴅ]

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

[mike12]

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