Primary navigation shortcode

Hi there,

thats quite tricky to do as the GP Navigation is more then just the wp_nav_menu request and it has to be hooked into the theme. Which isn't straight forward to do.

You could try the following.

1. Create a Shortcode that simply outputs a Hook. See here:

https://generatepress.com/forums/topic/block-element-inside-another-block-element-content/#post-1904275

in that example it creates a custom hook named: custom_shortcode_hook

2. Then set the Primary Navigation to display as per a default install and set its location to After Header

3. Then you can add this PHP Snippet to unhook the navigation and hook it into your short code hook:

add_action( 'after_setup_theme','db_shortcode_navigation' );
function db_shortcode_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'custom_shortcode_hook', 'generate_add_navigation_after_header', 10 );
}

This 'should' work and keep the themes styling and layout....

No luck with that David, can you see where I've gone wrong?

Must have a had a brain freeze, the action hook of #3 was completely whack.
i updated the above code and on the site child theme functions. You can see the nav now... will need some CSS next to style it how you require it.

Excellent, thank you 😊

Glad to be of help

Hi David

Sorry to be a pain, but I duplicated the shortcode into a different container that sits underneath the header, but only showing it on mobile view and then hiding the one that is in the header image container when on mobile view, as it was scaling the picture when going down to the burger menu.

The menu now sits underneath the header on mobile which is great, but the menu no longer works. Any reason why?

Thanks
Dave

Hi David,

The issue lies with the container block you've placed the menu in.

The Container block where the menu was inserted had this CSS:

@media (max-width: 767px)
.gb-container-4463f9e5 {
    display: none !important;
}

display: none !important; means the script can't toggle the display property of the menu to show it because the property is applied to the parent.

You'll have to write a toggle script for the display property of the Container Block so it shows up when you click the menu icon. :D

Any help with the toggle script would be very much appreciated.

You can try adding HTML Anchor toggled-container to the column container block.

<script>

let toggleBtn = document.querySelector(".menu-toggle");
let targetElement = document.querySelector("#toggled-container");

toggleBtn.addEventListener('click',function(e){
e.preventDefault();
targetElement.classList.toggle('show-content');
});

</script>

and then add this CSS:

#toggled-container{
display: none;
}

#toggled-container.show-content{
display: block !important;
}