chaning sub menu font to Bold and change color

HI @khaledgado,

I hope you’re well today. I inspected your site. But, looks like you are using Elementor website builder. Customizing through Website builders is much easier than traditional themes. You can easily change and achieve whatever you want through the Elementor window in your WordPress dashboard. Let me know if you want further help regarding this.

However, i can help you to achieve your needs with a custom CSS. Try adding the following CSS through Appearance> Customize > Additional CSS.

.ast-desktop .ast-builder-menu-1 .menu-item .sub-menu:last-child > .menu-item > .menu-link {
     font-weight: bold;
     color: #ff0000;
     border-bottom-width: 1px;

You can achieve any font color by changing the HTML HEX Colour code.

Let me know how it goes and don’t hesitate to rise further questions.

Best Regards
Muhammed Jazeel

thanks, but it affects the sub-sub menus, like for example i have main menu called projects under it a three submenus (Districts, Retails & Amenities and Tourist Locations ) every one of these submenu there are multiple submenus, i only want to make the three submenus bold (i highlighted them above) to make it easer for users to understand spcificaly in mobile view.

thanks again for your reply

Hi Khaled,

To make your sub-menu, items bold and change their color using CSS, you can add specific styles targeting those sub-menu items. Here’s a basic CSS code snippet to help you achieve this:

/* Targeting specific sub-menu items */
.sub-menu a {
    font-weight: bold;  /* Makes the text bold */
    color: #ff5733;     /* Replace with your desired color code */
}

/* If you need to target by specific classes or IDs */
.sub-menu .menu-item-disticts,
.sub-menu .menu-item-retails-amenities,
.sub-menu .menu-item-tourist-locations {
    font-weight: bold;
    color: #ff5733;  /* Replace with your desired color */
}

You’ll need to adjust the selectors (.menu-item-disticts, etc.) based on the actual classes or IDs of your sub-menu items. Add this code to your CSS file or a custom CSS section in your website builder. Let me know if you need further assistance!

Best regards,
[shoib]

thank you shoib but this is a transparent header, when i add the CSS in Appearance > Customize > Additional CSS, it makes all the submenus and sub-submenus bold, how to Target specific submenus, i’m sorry for asking a lot, i’m a beginner at this

Hi @khaledgado,

I can understand your needs. The style applies to the dropdown menu and the submenu because both have the same CSS class. You have to change the submenu class in the stylesheet if you want to achieve the same as what you are expecting. Recommending to take a backup if you are going to do this. You must add the new CSS class to all applicable styles if you are proceeding with this. Otherwise, the menu will mess up. The following picture may give you an idea of what I am telling to you.

Let me know if you need any further help.

Best Regards,
Muhammed Jazeel