Elementor GeneratePress

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;
}

Similar Posts

3 Comments

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

      1. I think he might mean subtitles? YouTube does this automatically, and they’re already active on your vid, accuracy isn’t 100% though, you can quickly run through and edit them to 100% yourself. Very quick.

Leave a Reply

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