• 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

Modifying Secondary Menu – Altitude Pro

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 › Modifying Secondary Menu – Altitude Pro

This topic is: not resolved

Tagged: Altitude Pro, Sticky Secondary Menu

  • This topic has 2 replies, 2 voices, and was last updated 6 years, 10 months ago by Sheldon.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • July 30, 2016 at 3:19 am #190479
    Sheldon
    Member

    I need advice on finessing the Secondary Menu in Altitude Pro theme. As a relative newbie, I'm pretty stoked I've got as far as I have, but now I'm stuck.

    webpage in question http://pineridgegolfcourse.waldheimvrp.ca/

    I want to change location of secondary menu to after the main menu, and have it mimic the behaviour of the main menu (sticky, transparent initially, then dark and smaller when scroll is not at top of page).

    This is as far as I have got.

    I relocated Secondary menu by commenting out the appropriate section in functions.php.

    //* Reposition the secondary navigation menu
    //* remove_action( 'genesis_after_header', 'genesis_do_subnav' );
    //* add_action( 'genesis_header', 'genesis_do_subnav', 5 );

    I changed .nav-secondary to fixed position to make it sticky via css and gave it top positions of 77px for over 1200px and 154px for over 1023px (hopefully easier way to do this),

    I added a .dark class to the nav-secondary by duplicating the code for .site-header in global.js, so I now get a nav-secondary.dark class.

    if( $( document ).scrollTop() > 0 ){
    		$( '.site-header' ).addClass( 'dark' );
    		$( '.nav-secondary' ).addClass ( 'dark' );			
    	}
    
    	// Add opacity class to site header
    	$( document ).on('scroll', function(){
    
    		if ( $( document ).scrollTop() > 0 ){
    			$( '.site-header' ).addClass( 'dark' );
    			$( '.nav-secondary' ).addClass ( 'dark' );			
    
    		} else {
    			$( '.site-header' ).removeClass( 'dark' );
    			$( '.nav-secondary' ).addClass ( 'dark' );			
    		}
    
    	});

    And added top position of 56px to .nav-secondary.dark in css.

    How is the height of the primary menu determined, so that I can match the secondary menu to it?

    On initial load of webpage, everything is good. When I scroll down, it's all good as well. Problem is when I scroll back up, when I scroll back up, .nav-secondary.dark stays in effect (should change back to .nav-secondary).

    I suspect part of my issue is that .site-header is a container for the primary navigation, and .nav-secondary IS the navigation, and I'm trying to treat them the same.

    Any suggestions?

    Sheldon Hildebrand

    http://pineridgegolfcourse.waldheimvrp.ca/
    July 30, 2016 at 7:27 pm #190509
    Christoph
    Member

    Hi,

    great job!
    1)
    The height is usually determined by the padding.

    2)
    I'd try changing

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

    to

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

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

    August 1, 2016 at 5:30 pm #190607
    Sheldon
    Member

    Thanks! Yeah, that was embarassingly obvious!

    As for the repositioning, I discovered using css to position the secondary header was impractical. Was able to put the secondary menu into the proper position simply by keeping the original repositioning code and changing the priority to match that of the primary menu (and now I know about priorities!! Cool!)

    I've added a unique background color to the secondary menu, now I have to figure out how to make the background color extend full width, outside of the site-header wrap container on large browsers.

    I also moved the white bottom border from site-header to nav-primary so that each menu has a bottom-border. Now I have to figure out how to remove it when .dark (guessing will have to add a .dark class to nav-primary and hope it doesn't impact other parts of site).

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

© 2023 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