How to Change Your Navigation Menu Font Size, Style, and Weight

Many users of the Ultimate Addons for Elementor Navigation Menu widget want to customize their menu's typography. A common question is how to change the font size, make the active menu item bold, or adjust the font family. This guide covers the built-in options and provides custom CSS solutions for more advanced styling.

The Common Problem

While the Navigation Menu widget offers some styling controls, users often find that the options for typography are either not immediately obvious or don't cover every specific need, such as applying a unique font to each menu item or making the active page's text bold.

Built-in Typography Settings

Before using custom code, always check the widget's built-in settings first. As referenced in the sample threads, typography controls for the main menu items are often located within the widget's styling tabs. Navigate to Style > Main Menu > Typography. Here, you can usually find options to change the font family, size, weight, and more for all top-level menu items at once.

Solution 1: Using Custom CSS

For styling that isn't available in the standard options, adding custom CSS is the most effective method. This is a standard practice for deeply customizing the appearance of WordPress websites.

To make the active menu item bold:
Add the following code to your theme's Additional CSS section (found under Appearance > Customize > Additional CSS).

.current-menu-item a {font-weight:800 !important;}

To target specific menu items:
You can use more specific CSS selectors to target different states or levels of your menu, such as submenus.

Why This Works

The Navigation Menu widget outputs standard HTML elements with common CSS classes that WordPress and themes use. The .current-menu-item class is automatically added by WordPress to the list item (<li>) of the page currently being viewed. The CSS rule above targets the link (<a>) within that specific list item and applies a bold font weight.

Important Considerations

• Theme Conflicts: The final appearance of your menu can be influenced by your active theme's styles. The !important declaration in the CSS helps override other conflicting styles, but it may not work in every case depending on your theme's specificity.
• Limitations: As confirmed in the sample threads, it is not possible to set a different font for each individual menu item using the plugin's settings alone; this would require more advanced custom CSS targeting each item uniquely.
• Best Practice: Always add custom CSS to the Additional CSS field in the WordPress Customizer or your child theme's style.css file to ensure your changes are not lost after a theme update.

By combining the widget's built-in typography settings with targeted custom CSS, you can achieve a highly customized menu design that matches your website's branding perfectly.