[Resolved] Float Right navigation on top of shortcode content?

Home Forums Support Float Right navigation on top of shortcode content?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #317671
    Lyle

    Hi Tom, Leo,

    Just doing some testing and am using an Elementor shortcode to replace the current header contents. This works fine with the Primary Navigation set to either Above or Below the header. But is there a way to have the Primary Navigation to “float right on top” of the shortcode contents when set to Float Right? 🙂

    I tried everything I could think of after going through all of my saved snippets of code from here and even dug around in the Codex and PHP docs! To no avail.

    No panic, it’s only something I thought would be interesting to know how to accomplish.

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    GeneratePress 1.3.46
    #317682
    Tom
    Lead Developer
    Lead Developer

    The float right option places the navigation inside the GP header element. So if you’re completely removing that element, that would explain it.

    What you could do is turn the GP navigation into a shortcode, and then you could place it wherever you like regardless of the Customizer setting.

    #317737
    Lyle

    Thanks Tom, got that working … now I know how to make a shortcode! 🙂

    Now if I could just get it styled and working like the below/above, that is, sub menus and sticky (via GP-Premium).

    The reason being there are a lot of folk looking to use Elementor to build their header but things fall down when they want to use the popular header right position for the menu. One can place the WP Custom Menu widget there, but it’s the basic UL display. There are some plugins around that come close, but it’s not the same as having the native GP menu formatting, etc.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #317741
    Tom
    Lead Developer
    Lead Developer

    Try setting the location to “custom”:

    add_filter( 'generate_navigation_location','tu_custom_navigation' );
    function tu_custom_navigation() {
        return 'custom';
    }
    #317976
    Lyle

    BINGO! 🙂

    The above post’s “location > custom” code and the code from https://generatepress.com/forums/topic/navigation-menu-inside-a-section/#post-134104 did the job!!!

    The nav now shows up in the “header right” position in an Elementor created header and with all of the GP Premium options in effect, i.e. Sticky Nav, etc. Plus mobile is perfect!

    Thank you so much for all your help with this 🙂

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #318016
    Tom
    Lead Developer
    Lead Developer

    No problem! Can I see all of the PHP you used? I might be able to refine it a bit 🙂

    #318023
    Lyle

    Certainly 🙂

    This is the code you provided for the custom location, thereby removing it from any of the standard GP locations:

    add_filter( 'generate_navigation_location','tu_custom_navigation' );
    function tu_custom_navigation() {
        return 'custom';
    }

    And this is the code that I got from that other post you replied to that does the “magic” and the GP nav shortcode (this is the part that I was missing):

    function generate_navigation_shortcode() {
          return generate_navigation_position();
    }
    add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

    Plop these two into a Code Snippets “Snippet”, add [generate_navigation] to an Elementor Shortcode widget, apply some CSS via Simple CSS to hide the header (a filter would be better, but this was quick & dirty) and there you have the “jenny wine” GP nav wherever you need it! That is so cool you cannot imagine 🙂

    This is one of the main features that was not readily available when using GP with Elementor. There is a 3rd party plugin that tries, but is not quite there yet (plus you have to duplicate the styling).

    Of course now there is Beaver Themer for GP and that is great but nothing along that line for those who use Elementor as their page builder while using GP as their theme. With the recent availability of GP Extender from Cobalt Apps, along with this new “revelation”, GP Extender could become the “Elementor Themer” for GeneratePress 🙂

    I have posted some screenshots of this on the Elementor FB Group if you would care to take a look and see how this all works.

    Tom, I have been trying to get this to work for months! And now that you have provided the means, I do believe I shall have a celebration with a “wee bit” of scotch 😉 <I am sure the neighbours wondered what was going on when I hollered after seeing the GP nav show up in the header! LOL 🙂 >

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #318065
    Tom
    Lead Developer
    Lead Developer

    Awesome, code looks good to me! 🙂

    #319520
    Lyle

    Hi Tom,

    Don’t like pestering you again, but I’m getting “greedy” now that the primary nav works 🙂

    I have tried a few iterations but I can’t seem to come up with the correct code to get the same thing apply to the Secondary Nav for GP-P. This would be great for those doing the same thing with a page builder custom footer widget area who want to incorporate the Secondary nav into it’s design.

    Cheers!
    Lyle

    PS > Congratulations again for the amazing GP-P 1.3 ! 🙂

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #319622
    Tom
    Lead Developer
    Lead Developer

    Without any testing, you should just be able to use this function in place of the primary navigation function: generate_secondary_navigation_position();

    #320491
    Lyle

    Worked a treat Tom! 🙂

    I updated the plugin to include the secondary nav and removed the “remove header” filter so as to maintain the schema markup.

    Also added a separate CSS file to do the site-header display none, right-align the sticky nav if enabled and center-align the secondary nav.

    Thanks again for all of your tremendous assistance with this project!

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #320494
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.