In Altitude Pro, by default a custom menu that's assigned to Secondary Navigation Menu location appears above the fixed header. Also when scrolling down, it will be hidden by the fixed header.
When scrolling down:
In this tutorial I share the steps to relocate the secondary navigation menu from above the header to below it and make the entire header + nav fixed instead of just the header.
When scrolling down:
Screencast:
Step 1
In functions.php,
a) replace
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
add_theme_support ( 'genesis-menus' , array ( 'primary' => __( 'Header Navigation Menu', 'altitude' ), 'secondary' => __( 'Above Header Navigation Menu', 'altitude' ), 'footer' => __( 'Footer Navigation Menu', 'altitude' ) ) ); |
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
I am struggling getting the Secondary Menu to be sticky along with the Primary Menu using your tutorial.
http://www.commercialsiteplan.com/dev/services/site-planning-services/.
I am using Altitude Pro theme along with Bill Erikson’s Genesis Subpages as a Secondary Menu Plugin.
In the functions.php:
I added this:
/**
* Submenu items in secondary menu
*
* Assign the same menu to ‘header’ and ‘secondary’.
* This will display the current section’s subpages in ‘secondary’
*
* @author Bill Erickson
* @link https://gist.github.com/billerickson/e337bdd2397957036f95/
*
* @param array $menu_items, menu items in this menu
* @param array $args, arguments passed to wp_nav_menu()
* @return array $menu_items
*
*/
function be_submenu_items_in_secondary( $menu_items, $args ) {
// Only run on ‘secondary’ menu location.
if( ‘secondary’ !== $args->theme_location )
return $menu_items;
// Find active section
$active_section = false;
foreach( $menu_items as $menu_item )
if( ! $menu_item->menu_item_parent && array_intersect( array( ‘current-menu-item’, ‘current-menu-ancestor’ ), $menu_item->classes ) )
$active_section = $menu_item->ID;
if( ! $active_section )
return false;
// Gather all menu items in this section
$section_ids = array( $active_section );
foreach( $menu_items as $menu_item )
if( in_array( $menu_item->menu_item_parent, $section_ids ) ) {
$sub_menu[] = $menu_item;
$section_ids[] = $menu_item->ID;
}
return $sub_menu;
}
add_filter( ‘wp_nav_menu_objects’, ‘be_submenu_items_in_secondary’, 10, 2 );
I changed the last line of the code below from this:
//* Reposition the secondary navigation menu
remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
add_action( ‘genesis_header’, ‘genesis_do_subnav’, 5 );
To this to move the secondary nav into the header and below the primary nav:
add_action( ‘genesis_header’, ‘genesis_do_subnav’, 12 );
Can you show me how to get the Secondary Menu sticky along with the Primary Navigation using your tutorial? I followed the steps and the secondary Menu did not stick with with Primary Menu.
I am not entirely sure what you are trying to do.
When BE’s plugin is used if a Page has children or is a sub Page, the children will automatically be displayed in the Secondary Menu. In Altitude Pro by default a menu assigned to Secondary Navigation theme location (labelled “Above Header Navigation Menu”) will appear above the Header + Primary Nav. The above tutorial explains how to move it below the Header + Primary Nav and keep it sticky.
Can you elaborate why you are adding https://gist.github.com/billerickson/e337bdd2397957036f95/ and how you want everything to work together?
Thank you Sridhar for your reply 🙂
I want the Secondary Nav to stay open ONLY on the Services Pages but not under Services Nav on the home page. (that’s why I used BE’s plugin and code that you referenced). The site currently does this.
Now I want the Secondary Nav on the Services Pages to be Sticky along with the primary nav (inside the Header + Nav wrap). I tried your tutorial and it looked pretty good except for after I scrolled down the page, the secondary nav was not longer sticky and it closed.
I do not find steps 2 and 3 implemented in your site.
For example, in http://www.commercialsiteplan.com/dev/wp-content/themes/altitude-pro/js/global.js all instances of
.site-header
are supposed to be.header-nav
.Can you please check?
Hi Sridhar, I ran through the steps in your tutorial again and now my primary menu doesn’t work.
I am not sure what happened. 🙁
If you scroll down to the Services page and click on a Service such as http://www.commercialsiteplan.com/dev/services/competition-maps/
the secondary menu is now sticky (yay!) BUT the primary navigation has disappeared on the secondary pages.
This works perfectly. Thanks again! However, I am using page jumps in the newly located secondary navigation (e.g., http://website.com/#front-page-2). I am searching for the element or property that would set the div id used as the anchor near the bottom of the secondary menu rather than the primary menu (as by default). Currently the page scroll now cuts off too much of the top of each page section because the header is taller with the added secondary menu below. Please let me know where to make this adjustment if it is possible. Any help is greatly appreciated.
Does this site have inner pages? If so, will the nav in inner pages also have the front page’s jump link?
Actually here are the three modifications I’ve made to Altitude Pro:
1. Duplicated Front Page as multiple Inner Pages (starting with: https://sridharkatakam.com/custom-page-template-in-altitude-pro-for-setting-up-an-inner-page-similar-to-the-front-page/)
2. Moved Secondary Menu under the Header from this tutorial
3. Conditionally assigned menus to the Secondary Nav location ( https://sridharkatakam.com/conditionally-assigning-different-menus-in-secondary-navigation-menu-location-in-genesis/ )
That all works beautifully together. What happens is on front page and the inner pages (that use the front page logic) when you click the nav items in the secondary menu under the header (which are jump points on that page) it scrolls too far because the height of the header with the secondary nav below are taller now. So the titles of each section of the pages are cut off.
Thanks again for any input.
Try these steps:
1) In front-page.php comment out http://pastebin.com/raw/4CA0ZAaW
2) In js/home.js, comment out http://pastebin.com/raw/gUtCfQyA
3) In style.css, comment out http://pastebin.com/raw/e1v57xDH
4) Install and activate https://wordpress.org/plugins/page-scroll-to-id/
5) Go to the plugin’s settings and put this in for the Selector(s):
.header-nav .genesis-nav-menu a
Set
114
for Offset.Hello,
I am having a very hard time finding and replacing only the classes specified based on line number. Mostly because I have entirely replaced the CSS because I followed your tutorial to add an interior home page type template to Altitude. Not only that—I have been customizing the site so this is pretty much impossible to know which classes to change.
Is there any way you can guide me?
I modified Altitude similar to JordonRupp (described above):
I started with this tutorial: Custom Page Template in Altitude Pro for setting up an inner Page similar to the Front page: https://sridharkatakam.com/custom-page-template-in-altitude-pro-for-setting-up-an-inner-page-similar-to-the-front-page/ I got this to work great.
My goal is to display a nav-secondary menu below the .site-header on both the home page and and my custom interior pages in order to offer jump links to the various sections on these pages. If I could get the the secondary menu (nav-secondary) to move below the .site-header would be great. I would then use Genesis Simple Menus to target those two pages with the jump menus for each page. I would be pretty much done.
However I’m having difficulty working with this menu tutorial. Even when I start out with a clean copy of the theme and have no other modifications, I cannot get it to work. Not sure but I suspect the CSS because the I’m not finding the classes at the line numbers called out in this tutorial.
“Replace .site-header with .header-nav in these lines: 162, 909, 918, 926, 938, 951, 1020, 1728, 1756, 1760, 1776, 1805”
I found .site-header at line 162 but the rest are not where they should be and there are many more of those classes which probably need to be left alone.
According to Firefox my nav-secondary menu is positioned/tucked under the site-header rather than below it so that menu is not invisible.
Perhaps something else is wrong but I have to suspect the CSS first. I really hope you can address this.
My apologies, I see now there is an example style.css which should answer all things. Did not see that link for some reason for the longest time.
Thinking as I start over I will implement the custom interior page tutorial first then circle back to these edits and then use the example/modified style.css linked above as a guide to find just the rules I need to edit because in the custom page tutorial the entire style.css is replaced. If I have any more questions I will contract your paid support option. Thanks.
https://www.diffchecker.com/diff can be quite handy in such situations.