UberMenu

[Terry]

Hi Tom,

I’m using UberMenu to create a nav menu with images. See the functioning version on a non-GP site here:

Test Site #1

But I can’t get the menu to display on the GP version. See:

Test Site #2

(The only menu I’ve completed with images assigned is the ‘Discover’ section.)

From doing a search in the forums on the topic, I found some CSS that was suggested to add, so I added this via Simple CSS:

@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;
      }
}

Plus this code to remove the extra arrow on the dropdown menu:

.dropdown-menu-toggle,
.search-item {
    display: none;
}

I did manage to remove the arrow, but the menu itself isn’t displaying. Any ideas on what might be causing it to not work?

Also, one more question. On the test site #1, you’ll see I have a transparent gap of about 10px between the navbar and the slider. If I set GP to use separate containers though, the boxes in front of the background aren’t pretty. I’m wondering if there’s a way to change one bit of code to get that transparent space, rather than going with separate containers and having to code in all the background colors etc. to get a solid display. Any suggestions there?

Many thanks!

Terry

[Tom]

Hmm hard to tell what’s going on – looks like something might be wrong with the actual menu settings, not GP.

Have you followed all of their instructions closely? Maybe try removing any CSS you’ve added and deactivate other plugins, then start fresh adding things one by one.

[Terry]

Hi Tom,

UberMenu has an option, if it isn’t displaying correctly, to try testing direct integration. That menu works. See:

UberMenu above header working

(It worked properly with or without the custom CSS I’d added as noted in my first post, so for this test, I’ve removed it. You’ll see the double arrow on the header menu as a result.)

On the UberMenu knowledgebase, they say:

“If the Direct Injection menu is working properly, but your replaced theme location menu is not, this indicates that a wrapper from the theme is the source of the interference.”

They have more info about what they call ‘residual styling’ here:

http://sevenspark.com/docs/ubermenu-3/diagnostics/residual-styling-detection-tool

They have a tool which can generate the PHP code to use to overcome residual styling, but I’m not quite sure where I would need to put it. They say:

“Pick the appropriate code and add to your theme template or content where you want the menu to appear.”

Options are:

PHP: <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>

Shortcode: [ubermenu config_id="main" theme_location="primary"]

So can I add this as a GP Hook after header content? Or does it need to go into functions? Or is there some other workaround that I’m not seeing here?

Many thanks,

Terry

[Terry]

Okay, after some investigation, it now appears that the menu will work with GP until I try to use UberMenu’s ‘row’ option. The test version works with it, but the theme version doesn’t.

You can see it in action via the link above. The ‘Discover Sayward’ menu is now working with the row removed. I added it to the Municipal Services section and it isn’t working. Any thoughts on where I might look to try and fix that?

Thanks,

Terry

[Tom]

Do they have any documentation on why the row feature wouldn’t work when the regular feature would?

I’m not sure what kind of functionality it adds, so it’s hard to tell what about it would conflict with the theme.

[Author]

Posts