- This topic has 7 replies, 2 voices, and was last updated 2 years, 5 months ago by Elvin.
-
AuthorPosts
-
October 18, 2021 at 10:53 pm #1967962Ken
Hi, I finally found a ‘mega-menu’ that works with GeneratePress (GP), Groovy Mega Menu.
Problem (see attached screenshot): I now have two menus. The top menu is the groovy menu and the bottom one is, I’m guessing GP WordPress menu.What I’ve done to try and get rid of the lower second menu as seen in the screenshot:
> I deactivated “GP Menu Plus”
> I selected ” Groovy Primary as “Primary Menu’ in Menus, Locations
> Menus > Manage Locations > Groovy menu Primary –> Assigned Menu “Groovy Primary” /// Primary menu -> no selection I’m assuming this is GP WP menu and want to not show it/ or delete it.Here’s the instructions to remove the built-in theme menu I found from groovy documents > Integrations:
How to remove the built-in theme menu
The way to disable the menu provided by the theme can vary from theme to theme. Here is a list of steps by priority:• Integrate the menu as “Integration through the child theme” NOTE: I don’t need to use their Child Theme as I’m enabling the “Automatic Integration” of Groovy” If enabled, the Groovy Menu markup will be placed after <body> html tag.)
For that go to “Groovy Menu > Integration” section and check if there is a possibility to “Integration through the Child theme” for your theme. (This method is available only for Themes that are already in our Child’s database.)* Unset all the Navigation menus provided by the theme from Appearance > Menus > Manage Locations and leave only provided by the Groovy menu (Groovy menu primary) I did this.
• Find the “Theme options” section in the theme that you use, if it exists, and find settings that disable the built-in header menu. I deactivated “Menu Plus” before installing Groovy Menu.
Check header settings in WordPress Customizer. I made sure that “Groovy Primary” was selected in Appearance > Customizer > menus.
I’m up far any suggestions you good folks may have. Thank you. Standing by.
October 19, 2021 at 1:04 am #1968035ElvinStaffCustomer SupportHi Ken,
Consider not assigning a menu to the primary menu location and hook in your custom menu on
generate_inside_navigation
of Groovy menu allows manual adding of menu through shortcode.Or take your pick on the hooks inbetween the
<nav> </nav>
here – https://github.com/tomusborne/generatepress/blob/master/inc/structure/navigation.phpOctober 19, 2021 at 5:48 pm #1969140KenHi, Wow! This is a bit over my head, especially the second option.
And for the first option, I don’t know how manual adding of menu through shortcode works, nor how to set it up.Thank you for your help. Please close this ticket. I’ll keep looking for a simple mega-menu plugin that’s easy to install, enable, and work.
October 19, 2021 at 6:28 pm #1969152ElvinStaffCustomer SupportI’ve not sure if this is still valid but there’s a docs about using a shortcode to display groovy menu – https://grooni.com/docs/groovy-menu/faq/how-to-add-groovy-menu-as-shortcode/
Alternatively, if groovy plugin adds a groovy menu as a block within the Block editor then that’s perfect because we can just replace the site header completely with Block Editor – Site header template and make your own Site header layout with groovy menu as the menu. 😀
Note: I actually did a quick test for this and it’s definitely doable. 😀
Check this one out – https://share.getcloudapp.com/L1ueYoJO – quite simple. 🙂October 20, 2021 at 3:30 pm #1970151KenHi Elvin,
Thank you for the helpful info, but I owe you good folks a deep apology for going down this rabbit hole. That is, I should have first done more research on more Mega-menu plugins…which I did after my last above post..I found UberMenu works well with GP-Child and I went with them. I wish I had done this research before posting about Groovy.
Moving on.
Everything looks good on the desktop I’m using GP Pro Menu Plus – “Sticky” that works nicely with UberMenu on desktop.
The problem is with mobile. Please see the screenshot below. There are two menus showing on my iPhone X. The top one is UberMenu labeled “Menu” and the bottom one is GP-WP with the “hamburger icon”
To hide/delete the lower “hamburger icon” UberSupport gave me the following PHP code to paste into my GP-Child Functions. I did and the
lower “hamburger menu” disappeared
> The problem: I lost the “sticky” function on my desktop.
> The question: is there any code that will ‘just’ hide the lower ‘hamburger’ on the mobile and still allow the “sticky” to work on the desktop?Here’s the code they gave me:
if ( !function_exists( ‘generate_navigation_position’ ) ) { function generate_navigation_position(){ if( function_exists( ‘ubermenu’ ) ){ ubermenu( ‘main’ , array( ‘theme_location’ => ‘primary’ ) ); } } } /* Stop the theme from filtering the menu output */ add_action( ‘wp_head’ , ‘stop_generatepress_menu_filter’ ); function stop_generatepress_menu_filter(){ remove_filter( ‘walker_nav_menu_start_el’, ‘generate_nav_dropdown’, 10, 4 ); }
October 20, 2021 at 7:21 pm #1970233ElvinStaffCustomer SupportThe easy way to deal with this is by skipping the PHP provided and just hide the default button toggle.
This element is hardcoded:
<button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="false">
but you can just hide it with plain CSS:
Example:
#mobile-header button.menu-toggle { display: none !important; }
You then keep the sticky settings on. 😀
October 20, 2021 at 7:52 pm #1970250KenHi Elvin!
Yes, that CSS did the trick!
Thank you so much.
I’ll close this ticket with a smile… ٩( ᐛ )وOctober 20, 2021 at 8:22 pm #1970258ElvinStaffCustomer SupportNo problem. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.