Site logo

Archived topic

How do I create a sub row of navs in header

26 replies · Started by Carsten on April 2, 2020

Viewing posts 1–15 of 27

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:

https://imgur.com/JMUaAVn

Hi Leo, yes for mobile primarily

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

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

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.

Thanks for clarifying

No problem :)

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?

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

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.

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

    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

    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?

    This archived topic is closed to new replies.