
Tagged: Burger Menu, menu
-
AuthorPosts
-
June 23, 2025 at 11:39 am #1485791
Hello everyone,
I need the following:
The burger menu is great, but I need it in multiple columns and not one above the other. How can I set it up that way? The Mega Menu option doesn’t change anything.Can you help me?
Like the screenshot https://ibb.co/4g1fVN9Q
Like thedive.com MenuJune 23, 2025 at 6:23 pm #1485809No One?
June 24, 2025 at 7:33 am #1485825Hi,
Thank you for the inquiry.
Unfortunately, the burger or mobile menu doesn’t have that option out of the box. For more options and advanced menu layouts, you may need to install a mega menu plugin such as UberMenu, Max Mega Menu, WP Mega Menu, or QuadMenu. You can also contact Codeable if you need extensive customization for the burger menu. Please check the link below.
— https://kriesi.at/contact/customization
Best regards,
IsmaelJune 24, 2025 at 8:02 am #1485828Look to your example page of thedive.com – its footer is exactly the burger content ;)
so maybe styling a footer-page and redeclare the hamburger icon with a different event that brings that footer to fullscreen and to fixed position ( left: 0 ; top: var(–enfold-header-height) ) is a possible solution. ( no automatic menü – but that way you like to have it)June 24, 2025 at 11:56 am #1485835to get a “footer-page” with dynamically feed menues – you can use the menu shortcode :
function custom_named_menu_shortcode( $atts ) { extract( shortcode_atts( array( 'name' => '', // Default to an empty menu name 'class' => 'custom-menu', // Default CSS class 'depth' => 0, // Default depth (0 for unlimited) 'title' => '', // New: Default to an empty title 'title_tag' => 'h2', // New: Default title HTML tag 'title_class' => 'menu-title', // New: Default title CSS class ), $atts ) ); $output = ''; // Initialize output variable // If a title is provided, add it to the output if ( ! empty( $title ) ) { $output .= '<' . esc_attr( $title_tag ) . ' class="' . esc_attr( $title_class ) . '">' . esc_html( $title ) . '</' . esc_attr( $title_tag ) . '>'; } if ( ! empty( $name ) ) { $output .= wp_nav_menu( array( 'menu' => $name, 'menu_class' => $class, 'container' => 'nav', // You can change this to 'div', false, etc. 'container_class' => $class . '-container', 'echo' => false, // Important: returns the menu HTML instead of printing it 'depth' => $depth, ) ); } return $output; // Return the accumulated output } add_shortcode( 'named_menu', 'custom_named_menu_shortcode' );
it is used like this:
[named_menu name="your-menu-name" class="my-custom-menu" depth="2" title="Our Main Menu"]
then you can setup your layout with codeblock elements – each of them represents a menu ( or different shortcode – f.e. social-media )
but for that i wouldn’t use the enfold burger icon – instead i would place a custom Button – perhaps a fixed button to toggle a class to hide/show this page.
June 24, 2025 at 12:49 pm #1485836see here an example page ( only with a color-section on that page that represents the footer-page )
https://webers-web.info/navigation/
for that menu item in the main nav i gave a custom-class to that menu-item: pseudoburger and used the label :
<span class="av-hamburger custom-burger av-hamburger--spin"><span class="av-hamburger-box"><span class="av-hamburger-inner"></span></span></span>
– this is exactly the usage of the enfold burger icon – plus a custom-class (custom-burger).the color-section got the ID: pseudoburger. (#pseudoburger)
( or if you use the footer-page for that – then you had to adjust all to that ID : #footer-page )i placed now a snipptet to my child-theme functions.php:
function a_pseudo_burger_menu(){ ?> <script type="text/javascript"> (function($) { $('body').on('click', '.pseudoburger > a', function() { $('#pseudoburger').toggleClass('visible-page'); $('.custom-burger').toggleClass('is-active'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'a_pseudo_burger_menu');
and on quick css:
#top #pseudoburger { position: fixed; top: var(--enfold-header-height); left: 0; z-index: 50; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1s ease; } #top #pseudoburger.visible-page { opacity: 1; visibility: visible; transition: opacity 1s ease; } #top .header_color .custom-burger.is-active .av-hamburger-inner, #top .header_color .custom-burger.is-active .av-hamburger-inner::before, #top .header_color .custom-burger.is-active .av-hamburger-inner::after { background-color: darkblue !important; }
June 25, 2025 at 12:07 pm #1485893see here example with “burger” always visible – and with #footer-page as overlay.
https://basis.webers-testseite.de/
if you are interested in that – i gave you a step by step guide.
June 25, 2025 at 2:12 pm #1485895 -
AuthorPosts
- You must be logged in to reply to this topic.