[Support request] Secondary menu misalignment

[Helen]

Hi Tom
I’m still an ardent fan of generate press theme and add-ons – but there’s one small thing that has bugged me for a while. I wonder if you might fix it sometime?

It has to do with the alignment of the secondary menu.

I have a very complex site so it is critical for me to give visual cues to users as they read regarding where they are in the big picture.

One way I do that is to have a dark background for the currently active menu item. It works brilliantly in the primary menu but in the secondary menu the background colour gets mis-aligned if there is any kind of drop down.

Maybe the easiest way to communicate what I mean is for you to have a look at an example.
https://forensicphonetics.com.au/the-murder/

This page has three red active menu links, showing which category and post are being read. Do you see how in the secondary menu, when there is a drop down, the red is squashed up to the right of the menu link? Id rather it left padding like on the left side.

Hope you can figure out what I mean. Hope you can fix it too :-))!

[Tom]

Interesting, it seems the arrow isn’t displaying, causing the spacing issue.

In “Appearance > Menus”, is this menu designated to the “Secondary” theme location?

If so, can you try #1 on this page to see if there’s a plugin conflict?: https://generatepress.com/knowledgebase/debugging/

The code adding the arrows to the primary navigation is the exact same as the secondary, so I wonder what’s stopping it from working.

Let me know 🙂

[Helen]

OK – it seems to conflict with Conditional Menus by Themify. Which is a shame because that is essential to me!
Any chance you can work around the conflict?
https://wordpress.org/plugins/conditional-menus/
https://themify.me/conditional-menus

[Tom]

Hmm, interesting.

Can you see if the same thing happens with this plugin?: https://en-ca.wordpress.org/plugins/menu-swapper/

[Helen]

Yes it does!
Curiouser and curiouser …
(and I am glad because I much prefer the Conditional Menus plugin for a big site)

[Tom]

Hmm, couldn’t get it to happen with Menu Swapper.

What’s happening is the dropdown arrow isn’t being added to the menu item – the arrow is what adds the padding to the right of menu items with a sub-menu.

In the plugin, are you creating new “theme locations”? The way GP adds the arrows is it first checks to make sure we’re working with the primary, secondary or slideout theme location.

What you can do is add the padding back yourself:

body .secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-right: 20px;
}

[Helen]

Interesting – as far as I could understand, it is menu swapper that creates a new menu location. Conditional menus claims that it just replaces the specified menu.
I’m happy to give you access if you’d like to check it out, but the css you sent solves my immediate problem to thanks for that.

The only small remaining issue is the css creates the padding but does not display the arrow? I thought it might just be displaying it in the same colour as the background but notice the primary menu seems to adjust the colour of the menu to match the font.

I can live with it the way it is but if you are able to add some css to make the arrow show up that would be nice.

Here’s the link again in case you want to see how it looks with your css added.
https://forensicphonetics.com.au/the-murder/

[Tom]

Menu Swapper looks like it just swaps theme locations around – not exactly ideal, but not changing the theme locations.

By the ID of your menu, it looks like the conditional menus plugin is changing/adding theme locations, which is why the arrow isn’t being added.

Unfortunately CSS can’t add HTML – it needs to be added inside the template itself.

I’ll need to see if there’s a better way for me to target GP menus only other than using theme location, as if I don’t target them specifically, any menu on your site will get the arrows (the menu widget for example).

I’ll look into it 🙂

[Author]

Posts