[Support request] I can’t edit menu typography

[catbiscuits]

I am trying to change the typography on my site’s primary menu, but it isn’t responding. I have disabled all caching (to my knowledge). Any ideas?

[David]

Hi there,

so the Menu Typography settings only apply to a GP Navigation, not a Navigation Widget ( or block ).
Instead of using a Nav Menu Widget in the Sidebar, you can use the GP Primary Navigation.

Go to Customizer > Layout > Primary Navigation and set its Location to Sidebar.
Then the GP customizer styles will apply

[catbiscuits]

So there is no way to apply typography settings to navigation widgets or blocks? This was the first of a few that I was using and I wanted to set it up before moving to the others.

[David]

Yes, in the Typography when you Add New Typography, in the Target Element Select box you can choose Custom.
This will provide a Custom CSS class field you can add your own custom selectors:

To style the Menu items add:

.widget_nav_menu .menu-item a

Now you can style the nav widgets menu items.

If you want a a different style for the sub menus, then repeat the above and use this selector:

.widget_nav_menu .menu-item .sub-menu a

[catbiscuits]

Hi, thanks for the quick response!

While I was away, I dropped this into additional CSS and it did most of what I wanted, the only thing that’s left is that the text is double spaced and I can’t figure out what is doing that. I tried line height and margin and neither did anything. If there is no advantage to using the custom element, I think it’s just easier to keep track of the additional CSS. This is a minimalist site, so all menus will be in widgets and all of them will be styled identically.

.widget_nav_menu a {
    font-size: 14px;
	text-transform: lowercase;

	
}

[catbiscuits]

Ignore. Working on this.

So this LARGELY did it.

I’m not sure why the line spacing is incorrect and the color is off in the top section. It seems like it’s playing by its own rules.

Sorry I’m bugging you guys so much with this.

.widget {
line-height: 1;
font-size: 14px;
text-transform: lowercase;
}

Let me know if there is any reason we shouldn’t do this and also what I can do to fix the top part.

[catbiscuits]

Ok, so in an effort to resolve this on my own, I went and created the Custom target element as you suggested with one modification, which is that I want it to apply to all text in any widget.

This works on the menu items, inexplicably, the paragraph at the top, however, is styled according to its own rules and I can’t figure out what those rules are or why they are being applied to it.

I don’t think the inherit property is doing it since I have tried with and without and it doesn’t make a difference.

[catbiscuits]

Ok, I think I figured it out, I needed to apply custom typography with .widget p as the target element. Am I right on that?

[David]

Thats correct.

[Author]

Posts