[Resolved] Add Third Navigation Menu GPP-1.8

Hi there,

We’ll need to do this in parts.

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set your hook to after_header
3. Check the Execute PHP checkbox
4. Add this as your content:

<div class="third-navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'YOUR_MENU_NAME' ) ); ?>
</div>

Once you do that, we’ll need to style it with CSS. If it’s possible to add the above and let me know, I can help with the CSS.

Thanks!

Did you create your third menu in “Appearance > Menus” and set it to your newly created theme location?

If you haven’t created a theme location, you can do so like this:

add_action( 'init', function() {
    register_nav_menu( 'third-menu', __( 'Third Menu' ) );
} );

Then your hook code would look like this:

<div class="third-navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'third-menu' ) ); ?>
</div>

Just be sure to add your newly created menu to that “Third Menu” location.

Thank you! Glad you’re enjoying the theme 🙂

Awesome! We’re getting close 🙂

Now let’s add this:

.third-navigation ul {
    list-style-type: none;
    margin: 0;
}

.third-navigation ul {
    display: flex;
    justify-content: center;
}

.third-navigation .menu > li:nth-child(2) {
    margin-right: 200px;
}

.third-navigation a {
    padding: 0 20px;
    line-height: 40px;
    color: #a51c30;
}

Better?

Thank you! 🙂

1. How can I replicate that second screenshot? All of the items should have the same padding. The second one does have margin forcing the third item to appear on the other side of the logo: http://prntscr.com/nfj2t7

That margin can be adjusted to move it left or right.

2. This might be difficult, but let’s try this:

.secondary-navigation {
    position: sticky;
    top: 0;
}

#sticky-navigation {
    top: 40px !important; /* height of the secondary nav */
}

Let me know 🙂

Awesome, glad I could help 🙂

Hi there,

You’ll need to implement some custom CSS based on your menu item set up.

For example:
https://www.w3schools.com/howto/howto_css_dropdown.asp
https://css-tricks.com/solved-with-css-dropdown-menus/

If you get stuck along the way, feel free to open a new topic and we’ll see if we can point you in the right direction.

Thanks!

Hi Chloe,

Could you open a new topic for your question?
And use the private info field link us to your site.

Thanks!