Altitude site header on minimum pro

[Kristie Hill]

Hi.

The site header on Altitude pro is transparent until you scroll, and then it becomes black.

I am trying to replicate the same thing in Minimum Pro (also uses static site header).

Is the scroll effect done with CSS alone, or is there also js involved? This is the css below that I could find relating to the site header.

What else do I need to adjust?

Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #000;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.featured-section .site-header {
	background-color: transparent;
}

.featured-section .site-header > .wrap {
	border-bottom: 1px solid #fff;
} 

---

Kristie Hill

[Ren Ventura]

Altitude is using a bit of jQuery to add a class to the header once the user starts to scroll, which is then styled with CSS. Minimum doesn't do this by default but you can add something like Waypoints.js or just use the .scrollTop() function to give you what you're looking for.

---

Web & Software Developer & Blogger | RenVentura.com | Follow Me on Twitter @CLE_Ren

[Kristie Hill]

I thought it was probably a jQuery. There are 2 files in the altitude theme that are jquery and theme related: jquery.logalScroll.min.js and jquery.scrollTO.min.js

Do you think both are necessary to accomplish it the transparent to solid?

---

Kristie Hill

[Genesis Developer]

Those two JS files are using for smooth scrolling on Home page only. Check the global.js file. Code is there

if( $( document ).scrollTop() > 0 ){
		$( '.site-header' ).addClass( 'dark' );			
	}

	// Add opacity class to site header
	$( document ).on('scroll', function(){

		if ( $( document ).scrollTop() > 0 ){
			$( '.site-header' ).addClass( 'dark' );			

		} else {
			$( '.site-header' ).removeClass( 'dark' );			
		}

	});

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Author]

Posts