- This topic has 8 replies, 2 voices, and was last updated 3 years, 6 months ago by
.
-
Posts
-
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?
Customer Support
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 applySo 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.
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:https://www.screencast.com/t/SMlSUKpDl
To style the Menu items add:
.widget_nav_menu .menu-item aNow 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 aHi, 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; }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.
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.
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?
Thats correct.
- You must be logged in to reply to this topic.
