Elementor GeneratePress

Elementor Pro + GeneratePress Premium – Add Primary and Secondary Menus with Shortcodes

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

This video shows you how to incorporate the native GeneratePress Primary and Secondary navigation menus into content created with Elementor and to place those menus using Elementor Pro and the GeneratePress Premium GP Hooks option.

Note that you may also use the free version of AnyWhere Elementor to do the same if you do not have Elementor Pro.

Other resources used in this video: Simple CSS, Code Snippets.

/* This makes the primary navigation shortcode */
function generate_navigation_shortcode() {
      return generate_navigation_position();
}
add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

/* This hides the primary navigation in any of the default GP loactions - if you don't add this, the GP primary navigation will also show up where it has been set in the Customizer */
add_filter( 'generate_navigation_location','tu_custom_navigation' );
function tu_custom_navigation() {
    return 'custom';
}
Primary Nav code for Code Snippets
[generate_navigation]
Primary Nav Shortcode
/* This makes the secondary navigation shortcode - set secondary nav to float left or right in the Customizer to hide it instead of a filter like the primary */
function generate_seondary_navigation_shortcode() {
      return generate_secondary_navigation_position();
}
add_shortcode( 'generate_secondary_navigation', 'generate_seondary_navigation_shortcode' );
Secondary Nav code for Code Snippets
[generate_secondary_navigation]
Secondary Nav Shortcode
/* Hides the site header leaving the schema.org header markup */
.site-header {
    display: none;
}

/* Moves sticky primary navigation to the right */
@media (min-width: 769px) {
    .navigation-stick #primary-menu {
        float: right;
        position: relative;
    }
}

/* Center aligns the GP secondary navigation - adjust width percentage as required */
.secondary-nav-float-right .secondary-navigation {
    float: none;
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    background-color: #6ec1e4;
}
CSS for Secondary Nav

Leave a Comment

Your email address will not be published. Required fields are marked *