Altitude Header Tweak

[ghog]

I am using Altitude Pro and would really like to style the header similar to this: http://j.mp/1B31gYT
But have no idea how. Could anyone please help me with this?

http://violetafinance.rareagency.co/

[Erik D. Slater]

The comparison site displays a few images using a slider-esque approach ... quite nice, actually 🙂 So I'm not sure to which image you refer.

So I'm wondering what you meant by "style" here. Were you thinking/hoping it could be done using CSS? Were you pointing to the image-rotation idea?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[MoodyRiviera]

I'm wondering the same thing as Erik is wondering...are you referring to the "slider effect"...or are you referring to the cool "Honest Folks," "Motion," and "HandCrafted" text effects? If referring to cool text effects, those are created in a graphics program such as Photoshop or Illustrator and then inserted into the slider. I don't think you're going to get anything to look like those using CSS.

*MoodyRiviera*

[Erik D. Slater]

@moodyriviera: Nodding in agreement 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

oh sorry guys I should of been clearer. i was actually referring to the navigation style of the solid block of colour with slight transparency that runs behind the menu items. By default Altitude is completely transparent with a single white line positioned under the menu. And yes I was hoping I could replicate this style with CSS. Thanks for your responses so far.

[Erik D. Slater]

Sooo ... you don't want the white line on your navigation menu, right?

aaaand ...

You do want your navigation menu background to have a transparent look, right? If you like, I can even give you the exact background used on Grain & Mortar 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

yes please I would really like to replicate their navigation, just with a few differences in height and fonts.

[Erik D. Slater]

In your style.css file, all the action happens between lines 918 and 928, which looks like this:

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

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

.site-header.dark {
	background-color: #000;
}

So then ...

To remove the white border, remove the .featured-section .site-header > .wrap definition (all three lines).

To add the transparent background you're looking for:
(1) replace background-color: transparent; with background: rgba(0, 0, 0, 0.5);
(2) remove the .site-header.dark definition (all three lines - gets used when you scroll down)

Grain & Mortar uses background: rgba(26, 26, 26, 0.25); ... so if you want to use those then apply the change to (1) above.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

hey Eric thank you so much that is amazing help mate. i added your changes and all works great. I experimented with the values but couldn't work out how to darken the transparency. Could you please explain how that works?

[Erik D. Slater]

Excellent question 🙂

The rgba parameters translate to rgba(red, green, blue, alpha transparency) ... so you would need to fiddle with that fourth number - the alpha transparency - inside background: rgba(0, 0, 0, 0.5);, i.e. the 0.5. The value ranges from 0 (fully invisible) to 1 (fully visible) ... so things get darker as you tend towards a value of 1.

I should say that normally I would use background-color for this sort of thing ... but background works too.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

Awesome. Thanks for all your help Eric.

[Erik D. Slater]

'twas a pleasure 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[anhlamgame]

oke men

---

Công ty [url=http://edena.vn/]Đệm[/url] Edena chuyên bán các loại [url=http://edena.vn/san-pham/nem/dem-nem-lo-xo-edena]?‘ệm lò xo[/url] và [url=http://cuscino.vn/san-pham/nem/nem-bong-ep.html]nệm bông ép[/url]

[ghog]

Hey Erik, I would like to make a small change to this menu styling and was wondering if you mind assisting me once more please? What I want to achieve is the look of the menu/navigation when the page scrolls to be common throughout. Currently the header logo and navigation reduce in size when the page scrolls and I would like to have this appearance by default. So in essence I would like to remove the default state and just display the scrolled state all the time. Hope this makes sense 🙂

Thanks

[Erik D. Slater]

Yep, no problem 🙂

Perhaps the cleanest way to achieve this is to only modify the JavaScript file that makes that magic happen. You would have to modify it anyway.

Pop yourself into a file called global.js ... which you will find under:
wp-content -> themes -> altitude-pro -> js

Don't panic if code isn't your thing. This is a very small file ... and we are only working with the first few lines at the top 🙂

Then, change the following code from:

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

	});

to

/*
ALL THAT JAVASCRIPT CODE YOU SEE ABOVE
*/
	$( '.site-header' ).addClass( 'dark' );

In other words, we are:
(1) adding /* before the code block
(2) adding
*/
$( '.site-header' ).addClass( 'dark' );
after the code block

Give that a whirl, then check back in 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

Thanks again Erik. One last thing, do you have any clue why the navigation still does not display on the home page and only on the inner pages?

thank you

[Erik D. Slater]

Ahhhh ... you didn't quite follow my instructions there. You added the open comment too early ... and you didn't add the crucial line that makes the magic work 🙂

Here is the full code for that file, complete with my initial proposal:

jQuery(function( $ ){

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

	});
*/
	$( '.site-header' ).addClass( 'dark' );

	$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');

	$( '.responsive-menu-icon' ).click(function(){
		$(this).next( '.nav-primary .genesis-nav-menu,  .nav-secondary .genesis-nav-menu' ).slideToggle();
	});

	$( window ).resize(function(){
		if ( window.innerWidth > 800 ) {
			$( '.nav-primary .genesis-nav-menu,  .nav-secondary .genesis-nav-menu, nav .sub-menu' ).removeAttr( 'style' );
			$( '.responsive-menu > .menu-item' ).removeClass( 'menu-open' );
		}
	});

	$( '.responsive-menu > .menu-item' ).click(function(event){
		if ( event.target !== this )
		return;
			$(this).find( '.sub-menu:first' ).slideToggle(function() {
			$(this).parent().toggleClass( 'menu-open' );
		});
	});

});

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

Thanks Erik, that has worked 90%. The only thing missing now is the background in the navigation. It is displaying on the inner pages but not on the home page.

Thanks

[Erik D. Slater]

You didn't copy the contents above, then paste it into your global.js file 🙂

You are still missing the following line (which is supposed to appear immediately AFTER the */ bit) ... which is required to make the whole thing work WITHOUT additional CSS changes:

$( '.site-header' ).addClass( 'dark' );

The only inner page I could find was your Services page ... and it looks like you modified the CSS to get the background colour working there.

Alternatively, if you don't want to make any additional changes to your global.js file, remove the following CSS definition from your style.css file:

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

I was trying to keep things nice n simple for you ... just in case you wanted to revert back to the original. Best laid plans n all that 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[ghog]

ahhhh my bad. thanks Erik, you da man 🙂

[Author]

Posts