[Support request] Primary and Secondary navigation placement

[Braden]

Hey there! I’m trying to do a couple different things with the navigation for a website I’m working on:

On desktop, I’d like Primary Navigation (buttons, aligned left) and secondary navigation (icon images, aligned right) to exist on the same line, below the header image. I’d also like the icon images to be vertically centered within their buttons – they seem to be attaching themselves to the top of the button unlike the text.

On mobile, I’d like to do the same thing, but would like the secondary menu’s buttons to just be visible at all times without a hamburger or off-canvas menu.

Is there an easy way to do this that I’ve just been missing? I’d also prefer not to use extra plugins if possible – trying to keep the site as lightweight as possible. Thanks in advance for the help!

[Elvin]

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.

[Braden]

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.

[Elvin]

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

[Braden]

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.

[David]

Hi there,

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

[Braden]

Sure do: https://assortedmeeples.com

Secondary navigation is currently disabled.

[Elvin]

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.

[Braden]

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.

[David]

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

[Braden]

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!

[David]

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;
}

[Braden]

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!

[David]

You’re welcome

[Author]

Posts