Altitude Pro | How to make small 'stationary' dark menu the default?

[tfmwaParticipant]

I've searched the forum, but didn't find any results. If I've missed a similar thread, please let me know!

In Altitude Pro, the primary navigation starts out in a larger size and then shrinks when you scroll down.
In addition, on the homepage the primary navigation starts of transparent and then changes to the dark style.

I'd like to have the dark style navigation as a default on all pages and make it so that it is always the 'small' version and does not resize when scrolling down.

I found the .dark menu styles in the css. But I can't quite wrap my head around how to achieve a nice compact and consistent sticky navigation.

Could anyone provide a hint or advice on where to look and how to achieve the above?

http://demo.studiopress.com/altitude/

[ChristophMember]

Hi,

the .dark class is added with jquery.

In the directory /altitude-pro/js you will find a file called global.js.
Open it in a text editor

You will see the following code at the top:

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

	});

Replace this part of the code with

jQuery(function( $ ){

	if( $( document ).ready()){
		$( '.site-header' ).addClass( 'dark' );			
	}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tfmwaParticipant]

Hi Cristoph,

Thanks so much for your reply!

Replacing the code made the menu stop resizing when you scroll down, which is great.

I'm going to see if I can get the homepage menu to turn into the dark one and overall remove some of the padding from the menu by changing the css so I get the sleek menu look.

[tfmwaParticipant]

I am a doofus.

I copied the code from the forum notification email I got. Sadly, the single quotes get replaced with their html equivalent.
Once I copied the code from your actual post, it worked.

It does seem to create a snapping effect though. When the page loads, the menu starts out as the larger dark one and then quickly snaps to the size of the smaller dark one. It does this on every page load in both Chrome and IE. I'll dig into the css!

[launchapril2015Member]

I am not sure if this is what you mean and if it would be an easy fix....I would go to style.css
Please let me know if this works.
Btw: I would have thought you would only need to make changes to css and nothing else but I am no expert.
Please let me know how it goes.

/* .header-image .site-title=LOGO - March 21, 2015
--------------------------------------------- */
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 45px; /* make this value = the same value as below */
text-indent: -9999px;
}
/* .header-image .site-title=LOGO WHEN SCROLLING - March 21, 2015
--------------------------------------------- */
.header-image .dark .site-title > a {
height: 45px; /* make this value = the same value as above*/
}

[tfmwaParticipant]

Hi @launchapril2015,

I tried your code with and without @christoph's modifications and in neither situation it seems to have any observable effect at all. 🙂

[launchapril2015Member]

Hi tfmwa,

I may have only given you half the answer.

First did the logo maintain the same size when attempting to scroll. Please confirm.

And

Then I think I found the code that enables you to maintain the same background for before and after scroll so it stays the same.

Again I am no expert here....just something I discovered a couple days ago myself.

So please confirm if the logo remains the same consistent size.

Many thanks.

[tfmwaParticipant]

Nothing changed at all. So the logo did not maintain the same size.

After applying the css provided, the theme continued to behave exactly like the demo theme. With and without @christoph's earlier suggestion of the .js modification. The .js modification does make the navigation black everywhere and the sleekest version. But when a page loads, it first loads the bigger version of the black navigation which then quickly shrinks/snaps down to the smaller, sleeker version without all the extra padding. And that happens on every page load.

[launchapril2015Member]

Hi tfmwa

Hmm. I did a test on my altitude pro by giving the same values to the height size for both sets of property values and it worked for me.

To be clear: my logo remained same size for both and after scrolling (and I understand that is your goal too)

This may indicate there may be something else inside your style sheet blocking the height info. You may have to get someone more experienced than me to see what's up. You may cite my .css work and say this did work for another altitude pro owner.

Sorry I could not be of more help.
Best

[tfmwaParticipant]

Thanks for your suggestion. I'll play around with it a bit more over the next couple of days.

What I personally want to achieve is have the sleekest version (post scroll) of the black menu all the time, no matter what. Editing the .js like @christoph suggested does work. Just need to tinker a little more to get rid of the snapping effect.

[launchapril2015Member]

Best of luck. Please let me know the outcome once you have found your answer.

Take care.

[ChristophMember]

I haven't noticed a snapping effect but you can try the following to see if it gets rid of it:

Delete this remaining portion of the code from global.js

if( $( document ).ready()){
	$( '.site-header' ).addClass( 'dark' );			
}

Insert this code at the end of your functions.php

// Add class dark to .site-header
function altitude_add_class( $attributes ) {
$attributes['class'] = $attributes['class']. ' dark';
return $attributes;
}
add_filter( 'genesis_attr_site-header', 'altitude_add_class' ); 

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tfmwaParticipant]

@christoph you are a wizard. Thank you. That completely did the trick.

I would never have figured that out on my own. I hope this can help someone else in the future as well (if so, please take the time to leave a reply!)

[Peter LaursenMember]

I have just read the thread, and it also helped me solve the issue! So once again @christoph, you are man of the day!

[tadhgParticipant]

Hi everyone,

I am trying to do something similar - I just want to eliminate the resizing/shifting when I scroll down. I like the transition from the white text on dark background to start, and then scrolling down to a white background / dark text menu. I also have a call to action nav item highlighted. I tried the solutions listed above, but they did not quite work for me.

The main problem is this: when I scroll down, the logo text moves down a few pixels, and the nav menu items all move a few pixels to the right, getting closer to the final menu item (which does not move).

Any thoughts on this?

Cheers,
Tadhg

[ChristophMember]

Hi,

if you want to keep the "color change", the solution above won't work for what you want to do.
The "shrinking effect" is done with css by adding a class (.dark) to some css elements.
All you need to do is make changes to the classes with the .dark added to have the same values as the "regular" classes.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[atimetoMember]

@tadhg did you find a solution to your issue. Im having the same problem.

[Dan BMember]

Excellent. Worked perfectly.

---

Dan @ ZindaMedia
Marketing, Fundraising and Social Media strategies for non-profits.

[Author]

Posts