- This topic has 9 replies, 3 voices, and was last updated 4 years, 6 months ago by
.
-
Posts
-
Hello
I’ve added the primary menu via a shortcode to a block at the top of the page…
https://staging.michellewilliamson.net/The shortcode code I added to functions was…
//CALL MENU VIA SHORTCODE function print_menu_shortcode($atts, $content = null) { extract(shortcode_atts(array( 'name' => null, ), $atts)); return wp_nav_menu( array( 'menu' => $name, 'echo' => false ) ); } add_shortcode('menu', 'print_menu_shortcode');How can I get the menu to use the header styling, so it breaks to a burger menu on mobile?
Thanks
DaveCustomer Support
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:
in that example it creates a custom hook named:
custom_shortcode_hook2. Then set the Primary Navigation to display as per a default install and set its location to
After Header3. 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
DaveCustomer Support
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. 😀
Any help with the toggle script would be very much appreciated.
You can try adding HTML Anchor
toggled-containerto 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; }
- You must be logged in to reply to this topic.
