Primary and Secondary navigation placement

Hi there,

Let's break things down.

As for the desktop menus in general:
I'm not fully sure I understand the exact layout you want to do. Any chance you could provide a mockup image for us to have a better idea on how to approach this?

As for the secondary menu on mobile:
To disable the hamburger for the secondary nav, try this:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

As for vertical alignment of icons:
The icons can be vertically centered with CSS.

Can you link us to the page in question so we could check it to be able to provide the proper writeup for CSS?

Let us know.

Sure. go over to https://assortedmeeples.com on desktop. You can see the primary menu currently. The secondary menu (currently not displayed) will contain the social media buttons that are presently visible to the right immediately under the menu - I'd like those buttons to appear on the same line as the primary menu on both desktop and mobile views.

To clarify, I believe you're aiming for something like this?

If so, first we move the secondary navigation.

Check this article on how to move the placing of the secondary navigation. Pick "Below Header"
https://docs.generatepress.com/article/secondary-navigation-location/

You then create a menu you can specifically assign to the secondary navigation, this will hold your icon menu.

On the secondary navigation, you should be able to set the icons navigation alignment like this:
https://share.getcloudapp.com/nOuoEENg

Unfortunately, I can't see your example. As to the two links you supplied, I know how to perform those steps, but when I do that, it places the secondary menu (and its icons) on a second line below the primary navigation. I do not want that - I want them to exist on the same line instead.

Hi there,

do you have a link to your site where we can see the current setup ?

Sure do: https://assortedmeeples.com

Secondary navigation is currently disabled.

Ah, my bad. It was this example:
https://share.getcloudapp.com/llu5mrq6

If you want them to be on the exact same line then perhaps there's no reason to use secondary navigation.

You can simply add the social icons on the same menu and set them apart as required with CSS.

If you can perhaps add the mock-up image of how you want it laid out, we can help out with the CSS write up.

That example isn't doing what I want either. Here's a couple mockups for desktop and mobile.

https://drive.google.com/file/d/15G2ySHhZb4R_d855YgCUuQudBfmH_aIN/view?usp=sharing

https://drive.google.com/file/d/1aCqsN7gm4f7o7uNxh3qVWypYZ78NYRK5/view?usp=sharing

Hopefully this does a better job of conveying what I'm looking for.

So to add the Icons into the Primary Navigation.
You can use a Hook Element.

1. First you need to change the Customizer > General > Structure to Flexbox. This version adds the menu_bar_items hook
2. Add a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add your icon HTML to the hook content.
Set the Hook to: generate_menu_bar_items
Set the Display Rules to Entire site.

It will need some CSS to position them. If you want to set that up, i can help with the CSS

All right, we're getting somewhere now! I've got the images added to the menu and have reduced their height to 32px through CSS. Now we just need to get the buttons closer together and centered on the right side on Desktop and Mobile, plus making sure the icons stay on the same line as the hamburger menu in Mobile. Any help you can provide with the CSS for that is appreciated!

Try this CSS:

.main-navigation .inside-navigation .menu-bar-item>a {
  padding-left: 8px;
  padding-right: 8px;
}

.menu-bar-item img {
  height: 32px;
  vertical-align: middle;
}

Those were the missing pieces I needed. I added in padding-bottom: 2px; to the .menu-bar-item img as the vertical align wasn't quite centered, and things are looking good now. Thanks so much for your help!

You're welcome