[Support request] Elementor nav widget

[Robert]

Hello,

I’m using Elementor’s new nav widget to in a custom header and I would like to include the search icon and Woocommerce icon that you have by default in your menu, it however will not show up when adding the menu this way through Elementor, it just shows the menu. Is there a way that I can add these elements back in?

The other alternative would be to add ‘generatepress_wc_cart_link’ in a hook to maybe a header before the navigation (if possible).

[Tom]

Those items are built to work with the GP menu, so it would likely involve some custom coding to make them work with a third-party menu.

You could always add the core WC cart widget into the header widget, or you could hook that function in somewhere as you mentioned:

add_action( 'generate_before_header_content', 'generatepress_wc_cart_link' );

[Robert]

Thanks Tom. Funny I got the notification for this as I’m searching the forum for another issue. I would like to add the expanding search elsewhere, out of the navigation. Found a few threads talking about it but was wondering if you had a direct function that has the search icon and hidden field until it’s clicked.

Thanks.

[Tom]

It’s not currently possible, but should be easier to extend outside of the primary nav in the next version of GP 🙂

[Samuel]

I was also very interested in bringing the GP Navigation Search into Elementor’s new nav widget. Using information from an older thread on this forum, I did the following [note: my understanding of these matters is minimal — this was an act of desperation]:

1. I put this into “Additional CSS” (via Appearance -> Customize):

.main-navigation .search-item {
display: none !important;
}

.main-navigation .search-item.custom {
display: block !important;
}

2. Under Appearance -> Menus, I created a Custom Link with URL = #, navigation label = <i class=”fa fa-search”></i>, and CSS class = search-item custom.

The little search icon now appears in the Elementor nav menu. However, it is not functional. If I click on it, the icon changes to “X”.

It was worth a try. The GP search icon is a nice alternative to the traditional search box.

[Tom]

What about the Elementor nav widget makes you use it over the GP menu? It’s likely that anything in that widget is achievable with a standard menu.

[Robert]

The new Elementor nav widgets lets you style thing a bit differently, I guess “ease of use” in Elementor’s general fashion. If you’re creating a header for instance and need to add the nav the only option is to use their widget, unless of course you use a shortcode or php to generate your nav directly. I guess they are generating the nav differently so therefore your search icon and Woocommerce cart don’t show up.

[Samuel]

Tom,

I had been using Elementor’s nav widget with another theme to embed the navigation menu in a custom header. The nav widget provides many choices for the way the menu looks and behaves, and is easy to use. I just recently installed GP, and thought that Elementor’s widget would pull in the little GP search icon/function along with the rest of the menu.

However, I think that the GP navigation bar will be fine ‘as is’. I just need to familiarize myself with its options. So my workaround now is: create a header in Elementor (without the nav widget), and paste its short code into wp_head via GP hooks. The net result is that my customized header sits just above GP’s menu bar. It looks pretty much like I hoped it would.

Thank you,

S

[Robert]

Nice. What short code are you using to generate the menu? I’m thinking of maybe doing the same thing as a workaround, creating a secondary menu for use for the custom Elementor header and then creating a top bar that has the primary navigation but no menu items, just the search icon and woocommerce link. Probably not the best way to do it but a possible viable workaround.

[Samuel]

Hi Robert,

What I have done so far is: I create a header within Elementor and then save it into the Elementor library. Elementor assigns a shortcode to it (in the pro version) that I then paste in to the wp_head box in GP Hooks.

I’m not using a shortcode for the GP navigation menu at all. The nav bar just shows up immediately underneath my custom header (the GP navigation menu is set to be below the header via appearance->customizing->layout->primary navigation). Under page settings, I have disabled GP’s top bar and header, but not its primary navigation menu.

I should caution you that I am a complete beginner, I’m learning by trial-and-error, and what I am doing may not be ideal. But maybe you can elaborate on my strategy to create the header you want.

Perhaps it can also be done through GP’s Page Headers area. I think Page Headers makes it possible to assign different headers to different pages, whereas my method imposes a global header. I’ve tried a few times (no success yet).

[Robert]

Cool, thanks for outlining your approach, appreciate it 😉

[Tom]

Instead of adding it into wp_head, add it into the Before Header hook. wp_head is more for scripts and styles.

You can also turn the GP menu into a shortcode and use it wherever you like.

If there’s something specific you’d like to see in the GP Menu (underlines etc..), I can definitely help out with some pretty simple code 🙂

[Samuel]

Tom,

I will give the Before Header hook a try.

Question: to obtain a shortcode for the nav menu, do I need a plugin like “Menu Shortcode”, or is there a way to do this natively within GP?

Finally, thank you for being open to additional menu style options.

s

[Robert]

Its probably overkill to even use the elementor nav widget if you really don’t require that form of visual customization that a page builder affords. For me I wanted to have a 3 column header (social media buttons, logo, phone number) and below that the primary nav with the woo commerce cart and search button. After thinking about it more and considering your insight, I think I don’t really need to use the Elementor nav widget for this since the menu itself wouldn’t be too complex in nature. I think i’ll give it a try by just inserting the shortcode or using a hook. Would the correct hook be ‘after header’ so that it’s after the elementor header? Alternatively do you have a shortcode readily available for the menu or were you suggesting i could turn the nav into one?

The only thing I liked about the nav widget was the growing underline on hover, other than that i didn’t do anything else that was complex.

[Tom]

To add the navigation as a shortcode, you could do this:

add_filter( 'generate_navigation_location','tu_custom_navigation' );
function tu_custom_navigation() {
    return 'custom';
}

function generate_navigation_shortcode() {
      return generate_navigation_position();
}
add_shortcode( 'generate_navigation', 'generate_navigation_shortcode' );

Then you can do this: [generate_navigation]

For the growing underline, this should help: https://docs.generatepress.com/article/adding-menu-hover-animation/

[Author]

Posts