[Support request] Create a secondary menu different by category

[Ismael]

Hello,
I have a main menu sticky to all site which contains the main categories from the site (mainly “travel destinations”) in http://www.pedazosdemundo.com

I would like to add a secondary menu just as this example: https://www.barcelo.com/guia-turismo/es/espana/lanzarote/que-ver/que-visitar-en-lanzarote/. There is the main menu on top (color olive), and then a sticky secondary menu (color grey) is specific to a destination (“Lanzarote > Experiencias, Que ver…”).

Is this possible with GP?

[Ying]

Hi Ismael,

Yes, it’s possible with CSS, but there won’t be animation like you have right now for the primary navigation. Is that ok?

Question for you:

Are you trying to make the exact same header/main navigation and secondary navigation? Or you are happy with your current layout, just want to add a secondary navigation below the current main navigation and make it sticky?

[Ismael]

Yes, it’s OK if I lose the animation for the primary nav, I could try.

I’m happy with mycurrent layout, and I want to add a secondary nav below the current main navigation that would become sticky.

PS: Sorry for the late response!

[David]

Hi there,

first step is to add a Menu to the Secondary Navigation in Appearance > Menus.
Then in Customizer > Layout > Secondary Navigation –> Location to Below Header

After that can you Disable the Sticky Navigation. Then let us know and we can provide some CSS to make both navigations sticky.

[Ismael]

Hi David

I did that but the new menu is overlapping to the page hero (which I’m inserting through GP Elements),

find an screenshot:

https://ibb.co/RhQ1CSj

I want the secondary menu to be below the page hero, and only that one to become sticky when you scroll down. Also, I want several secondary menus that are customized based on the Destination (e.g: Thailand, Italy, etc.)

Thanks for your help

[David]

Ok in the original Dispatch Site the Secondary Nav was displayed below the page hero. It was added using a Hook Element titled: Secondary Navigation is that element still there in Appearance > Elements ?

If it isn’t then create a new Hook element.
In its content add:

<div class="second-nav grid-container">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
</div>

Set the hook to: generate_after_header
Check: Execute PHP
Set the Priority to: 15

Set the Display Rules to the Location you want it displayed.

For the different menus – how many different menus are there? And how will they differ ?

[Ismael]

Hi David,

we are progressing! I can see the menu below header, but the styling is exactly the same as the main navigation.

In this url you can see how it’s now: https://pedazosdemundo.com/como-moverse-en-bangkok/ (you can barely see it because of the styling, but it’s between the header and the breadcrumbs)

Also, how can we proceed with the sticky navigation of the secondary navigation?

Many thanks!

[Ismael]

Ah oh, sorry, and by your questions on how many secondary menus, I will have one per Category (more or less 10)

They will differ on the linked items, not in the styling

[Ying]

You will need a menu plugin for that, so you can assign different menu items for different pages/archives.

[David]

As Ying said – i would use a plugin especially as there are a number of menus to handle.
Here is one of those plugins for example:

https://en-gb.wordpress.org/plugins/conditional-menus/

[Ismael]

Many Thanks,

now I have the plugin and I have the ability to create menus based on the category, great 🙂

But, I don’t know why, now the menu is appearing in two sites:

https://pedazosdemundo.com/como-moverse-en-bangkok/

Above the main menu, and after header (where I want it)

Is because it’s causing a conflict with the PHP hook?

[Ying]

I don’t see a duplicated secondary navigation on the link you attached:
https://www.screencast.com/t/pTegMlMrhu
Let me know if I miss anything.

[Ismael]

Yes it’s there, look I’ve selected it:

https://ibb.co/6g88kHk

between the page hero and the breadcrumbs

[Ying]

Ah I see it now, 2 questions:
1. what’s the setting at customizer > layout > secondary navigation > navigation location? Is it
2. do you have this element David mentioned? if so, what’s the code you added, and what’s the hook you are using? https://generatepress.com/forums/topic/create-a-secondary-menu-different-by-category/#post-2251117

[Ismael]

1. I had it on Floating Right. Should I put into ‘No Navigation’? If I put into ‘No Navigation’, the upper right menu disappears and the desired menu remains between the page hero and the breadcrumbs (which would be ok, look: https://pedazosdemundo.com/como-moverse-en-bangkok/)
2.Yes, it’s:

<div class="secondary-navigation">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
</div>

[Author]

Posts