[Support request] I can’t edit menu typography

Home Forums Support [Support request] I can’t edit menu typography

Home Forums Support I can’t edit menu typography

  • This topic has 8 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2382657
    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?

    #2382820
    David
    Staff
    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 apply

    #2382843
    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.

    #2382864
    David
    Staff
    Customer Support

    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:

    2022-10-23_13-45-34

    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

    #2382894
    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;
    
    	
    }
    #2382901
    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.

    #2382940
    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.

    menu

    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.

    #2382943
    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?

    #2383170
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.