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

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

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';
}
[generate_navigation]
/* 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' );
[generate_secondary_navigation]
/* 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;
}

2 thoughts on “Elementor Pro + GeneratePress Premium – Add Primary and Secondary Menus with Shortcodes”

  1. Hello, I hope you can show the tutorial in the form of picture + text, because you also have fans from other countries who can’t speak English, support me, like me, haha, I still don’t understand the video, thank you.

    1. Sniffle Valve

      Hi Martin,
      Although I appreciate your concern, it is not feasible for me to provide that kind of support for free. It takes a great deal of time to make that type of tutorial and to do so without compensation just does not make any sense.
      Cheers!
      Lyle

Leave a Comment

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