Integration with UBERMENU

Hi there,

Give this CSS a try:

@media screen and (max-width: 768px) {
      .menu-toggle, .main-navigation.toggled .main-nav > ul {
            display: none;
      }
      .main-navigation ul {
            display: block;
      }
}

@media screen and (min-width: 769px) {
      .ubermenu-responsive-toggle {
            display: none;
      }
}

Hi Tom,

That was quick! Thanks.

We tried the CSS you gave us and that has fixed one part of the problem, being the UBERMENU now works as designed while in mobile mode. :)

But 2 issues remain:

1. The default menu title/header "Menu" continues to show up in mobile mode.
2. While in non mobile mode, UBERMENU shows the title/header for mobile mode - "Responsive UBERMENU"

Appreciate all your help and the fast turnaround.

Thanks a lot in advance.

-R

Try this code instead:

@media screen and (max-width: 768px) {
      .menu-toggle, .main-navigation.toggled .main-nav > ul {
            display: none;
      }
      .main-navigation ul {
            display: block;
      }
      .ubermenu-responsive-toggle {
            display: block !important;
      }
}

@media screen and (min-width: 769px) {
      .ubermenu-responsive-toggle {
            display: none !important;
      }
}

As for the "Responsive Ubermenu" text - that's handled by the plugin I believe, so you'll have to ask them how to change it.

Hope this helps :)

Brilliant!!!

Thanks a ton.

Will be putting up a review about GeneratePress soon. Also we would like to get our website featured when it is all done.

BTW any plans of a Mega Menu Add-on?

Cheers!
R

You're welcome :)

No plans for that yet - there's already some pretty good options out there that work.

Maybe one day though!

Hi Tom,

Unfortunately there are some other display related problems with the UBERMENU which means the Automatic Integration provided by UBERMENU is not working too well with the GeneratePress theme inspite of all your help with the CSS code.

We are trying the manual integration way and stumbled upon the code on the support forum provided by you:

remove_filter( 'wp_nav_menu_args', 'generate_wp_nav_menu_args' );
remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
add_action( 'generate_after_header' , 'generate_ubermenu' , 5 );
function generate_ubermenu()
{ ?>
<div class="grid-container">
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
</div>
<?php
}

Unfortunately the default menu does not get removed.

Any idea why?

Thanks again.

Are you sure the navigation is set to display after the header in the Customizer?

Hi,

Yes the navigation is set to display "Below Header".

I have now changed the navigation position to "Above Header" under:

Appereance > Customize > Layout > Navigation Layout

and the functions.php to:

remove_filter( 'wp_nav_menu_args', 'generate_wp_nav_menu_args' );
remove_action( 'generate_before_header', 'generate_add_navigation_before_header', 5 );
remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
add_action( 'generate_after_header' , 'generate_ubermenu' , 5 );

As you can see the UBERMENU is getting displayed correctly now. Just the the default menu still remains which needs to be removed.

Thnx

Maybe just set the Navigation Position to "No Navigation"?

If that doesn't work, you can always try this:

.main-navigation {
      display: none;
}

Hey Tom!

That was a Master stroke from you!

I simply changed the navigation position to “No Navigation” under:

Appearance > Customize > Layout > Navigation Layout

and:

functions.php
add_action( 'generate_after_header' , 'generate_ubermenu' , 5 );
function generate_ubermenu()
{ ?>
<div class="grid-container">
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
</div>
<?php
}

All done.

Thanx.

Awesome! Glad I could help :)