[Resolved] How do I create a sub row of navs in header

[Carsten]

Hi here, I would like to create something like this, with a sub nav of the three most used pages, like the ones marked with arrows here:

View post on imgur.com

[Leo]

Hi there,

That’s for mobile correct?

If so you can use the secondary navigation with this method:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Carsten]

Hi Leo, yes for mobile primarily

[Leo]

Yup then the secondary navigation with linked above should be the way to go.

[Carsten]

Thanks, I will have a look at this, I just wonder about the title of this article, ‘Disable Secondary Navigation Mobile Menu’, when it is actually about adding an extra row of navs?

I would have expected this should be done with a Header Page Hero element, but again, I might be mixing up the two header contents

[Leo]

By default the secondary navigation turns into a menu toggle like the primary navigation, this is to disable the toggle option so that the menu items show up normally like on desktop.

[Carsten]

Thanks for clarifying

[Leo]

No problem 🙂

[Carsten]

Hi there, now I have disabled the Secondary Navigation Mobile Menu, to create an extra row of links, under my mobile header.

Now I want to add buttons to the menu. I have viewed the options in /collection/secondary-navigation/. So is the way to go to add these links/buttons the .botton class for every link I want to add, in my functions.php?

[David]

Hi there,

if you want to make those links look like buttons – read this:

https://docs.generatepress.com/article/adding-buttons-navigation/

[Carsten]

It is more the mark-up of the links which is the problem.

I have added the.button class like this example to my functions.php, but it breaks my site.

<a class="button" href="https://google.com">Button to Google</a>

Obviously this code need some extra tags to function?

How do I point these created links to the secondary navigation?

Thanks

[Tom]

You could create a Hook Element instead of using the Secondary Nav if you want full control over the HTML: https://docs.generatepress.com/article/hooks-element-overview/

If you add the button class to your menu items, it will add the class to the <li> element. Then you just need to adjust the CSS to fit that markup.

[Carsten]

Hi there, I know how to create a hook element, which hook should I use for a secondary nav?

If you add the button class to your menu items, it will add the class to the

element. Then you just need to adjust the CSS to fit that markup.

Would you please clarify what you mean, should I add this button class php in the element that I have created?

Do you have any documentation on how this markup for links should look like?

Regards
Carsten

[David]

THIS:
If you add the button class to your menu items, it will add the class to the <li> element. Then you just need to adjust the CSS to fit that markup.

MEANS:
If you use this documentation: https://docs.generatepress.com/article/adding-buttons-navigation/ to add the button class then it will be added to the Menus <li>

The Markup will look something like this:

<li id="menu-item-1391" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1391 button">
    <a href="https://some-site.com/some-page">A menu links label</a>
</li>

And the CSS selector to style it would be:

.secondary-navigation .main-nav ul li.button a

[Carsten]

Thanks, regarding which hook to use,
if I choose the inside_navigation hook, the link displays in the line of the main navigation.

If I choose inside_secondary_navigationthe link is not displayed at all?

[Author]

Posts