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!

Hi Tom,
First of all Thanks for creating such a nice theme(Generatepress Premium) and clean products,
and thanks for your friends in the support team, great support.

About the php code it works like this:
https://drive.google.com/open?id=16Wm0GKeFJT0b8J71V4ve7weivXleidbm

,as you see it brings all other pages from other menus like (main menu and secondary menu)
As you know it should brings only the third menu pages, if I'm not wrong!
So I need your help with php fetch menu and the CSS code, please.

Thanks a Million Tom Usborne!

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 :)

Hi Tom,
It works, Great! thanks a lot...

Just information for other newly GPP customers, I have added the third Navigation Menu without using child theme,
just using GP hook, and code snippets plugin.
Please see,
https://drive.google.com/open?id=1C543LTEHPHDGc4btsnEMSGBCInSHMa9z

Sorry I was missed to create a theme location, which there was created the issue,

So let's do add custom CSS code, Tom please,

Really I feel happy while I'm using GP Premium theme, :).

Great Great support.!

Best Regards,
Karzan

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?

Hi Tom,

Thank you so much, it works great as I expected :)
Please see as I promise you deserve 5 star for theme and support :
https://wordpress.org/support/users/karzan2017/reviews/

And sorry for I was late in answering,
I need your help please with custom CSS code, related with (menu)s

1- I don't know how to balance padding of(main menu pages) to be all of them have the same margin and padding.
Please see the differences:
https://drive.google.com/open?id=1kn95UU8wlvRO6aC8dD-NtPizrjil6VsV
Is there any way to be give each pages on main menu its own width & height(250x50)equally regarding word numbers.
https://drive.google.com/open?id=1bY0jwITlqvhmsNWY-cpF2juEmuZaBgtF

2- I want to fix top bar(Secondary Navigation) with sticky main menu, visible with scroll?

Note: Target website with my website added please.

I appreciate your help Tom, you have super support.
I have a plan to give WP Show Posts + and another 5 star, :)

Best Regards,
Karzan

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 :)

Hi Tom,
I hope you are doing well,

1- I got it.
2-It works as always great!fixed top nav, Thank you so much for your help.

Best Regards.
Karzan

Awesome, glad I could help :)

Hi Tom,

I added this custom menu to my website as well. Can you help me with the custom coding on drop down menus. I have all the coding listed here. Any help would be appreciated, thank you.

----------------------------------------
Added custom code to functions.php
----------------------------------------

/*from WPBeginner add custom menus https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/*/
function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'billing-menu' => __( 'Billing Menu' ),
      'legalsec-menu' => __( 'Legal Sec Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

-----------------------------------------
Added this code as a hook element
-----------------------------------------

<style>.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;
}</style>
<div class="third-navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'billing-menu' ) ); ?>
</div>

-----------------------------
Here is what it looks like. Can you help me create dropdown menus?
-----------------------------
https://crm.uslawpros.com/wp-content/uploads/2021/01/GPnewmenu1.png
https://crm.uslawpros.com/wp-content/uploads/2021/01/GPnewmenu2.png

Thank you

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 there

I have implemented this on my site also. It is great. I use elements to show menus on specific pages which is great. The only issue is that they all go strange on mobile. I am not sure how to rectify this. Might you be able to help?

Many thanks

Clojo

Hi Chloe,

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

Thanks!

Hi Ying. Cool. I have posted here: https://generatepress.com/forums/topic/making-third-navigation-mobile-friendly/

Chloe