• 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

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

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 › Altitude Pro | How to make small 'stationary' dark menu the default?

This topic is: resolved

Tagged: Altitude Pro, Dark, Sticky Navigation

  • This topic has 17 replies, 7 voices, and was last updated 7 years ago by Dan B.
Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 22, 2015 at 10:23 am #145200
    tfmwa
    Participant

    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/
    March 22, 2015 at 11:21 pm #145281
    Christoph
    Member

    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

    March 23, 2015 at 5:05 am #145301
    tfmwa
    Participant

    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.

    March 23, 2015 at 5:32 am #145304
    tfmwa
    Participant

    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!

    March 23, 2015 at 10:40 am #145341
    launchapril2015
    Member

    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*/
    }

    March 23, 2015 at 11:48 am #145348
    tfmwa
    Participant

    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. 🙂

    March 23, 2015 at 12:01 pm #145349
    launchapril2015
    Member

    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.

    March 23, 2015 at 12:09 pm #145350
    tfmwa
    Participant

    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.

    March 23, 2015 at 12:25 pm #145352
    launchapril2015
    Member

    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

    March 23, 2015 at 12:28 pm #145353
    tfmwa
    Participant

    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.

    March 23, 2015 at 12:35 pm #145354
    launchapril2015
    Member

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

    Take care.

    March 24, 2015 at 11:31 am #145497
    Christoph
    Member

    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

    March 25, 2015 at 7:45 am #145590
    tfmwa
    Participant

    @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!)

    March 25, 2015 at 8:12 am #145593
    Peter Laursen
    Member

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

    May 12, 2015 at 2:56 am #151826
    tadhg
    Participant

    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

    May 12, 2015 at 8:35 am #151851
    Christoph
    Member

    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

    June 20, 2015 at 10:36 pm #156967
    atimeto
    Member

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

    June 22, 2015 at 1:06 am #157113
    Dan B
    Member

    Excellent. Worked perfectly.


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

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 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