Change specifc Ubermenu Top link only

[dstro003]

Hello support team,

I would like to change the font size & weight of the uber menu #201 on this page

Main Free Downloads

How would I change just this top link?

Thanks!

[jumar]

Hello @dstro003,

Thanks for writing in!

You can change by this going to Appearance > UberMenu > Main UberMenu Configuration > Style Customizations:

Hope it helps.

[dstro003]

Hey jumar,

Thanks for the reply.

I would like to change the top link font size and weight of only uber menu #201.

Would this be possible?

Thanks!

[Prasant]

Hello @dstro003,

Thanks for asking.

I don’t see menu having Id of 201. However, I am giving you the CSS that can be used to make necessary changes. Just make sure to change the id number:

li#menu-item-5869 {
    font-weight: bold;
    font-size: 28px;
}  

Thanks.

[dstro003]

Hey Prasant,

Thanks for the reply, but the code has not worked.

I would like to this style change to the uber menu shown in the photo.

Is there another id for ubermenus that I am not looking at?

Thanks

[jumar]

Hello there,

Let us try again. Please add this code:

#ubermenu-nav-main-201 .ubermenu-target-text {
       font-weight: bold;
       font-size: 28px;
}

You can change the font size to what suits you. E.g. 30px

Then add this one as well.

#ubermenu-nav-main-201 .ubermenu-sub-indicators 
.ubermenu-has-submenu-drop>.ubermenu-target:after {
       right: 20px !important;
       top: 40% !important;
}

This code pertains to the alignment of the dropdown icon beside Category text. You can tweak this as well.

This fix is only for UberMenu #201.

Hope that helps.

[dstro003]

Thanks for the code Jumar.

This has worked but has also effected the drop down menu as well.

Is there anyway to style just the top level header?

Thanks!

[jumar]

Hello there,

Please update the CSS code to only this:

#ubermenu-nav-main-201 .ubermenu-has-submenu-drop>.ubermenu-target:after {
   top: 45% !important;
   right: 15px !important;
   font-size: 20px !important;
}

The code above pertains to the dropdown arrow.

Then add this to Pro > Launch > Theme Options > JS:

jQuery(function($) {
   $( "#ubermenu-nav-main-201 .ubermenu-target-text:contains('Category')" ).css( {"font-weight":"bold", "font-size":"28px"} );
});

While this for the Category dropdown menu text. You can update the styles from here.

[dstro003]

Great! Thank you for the updated code!

I would also like to add other uber menus to style as well.

Would I just copy this code over multiple times and just change out the uber menu # and the text of the top level headers?

Thanks

[christopher]

Hi there,

Yes, that is correct. You can find the ID of the Ubermenu in use using the Google Chrome Developer Toolbar and see the outermost wrapper of the menu to find the actual ID:

The screenshot above is the one you have on your page and as you can see in the blue background code the ID of that particular menu is: ubermenu-nav-main-201

For more information:

Thank you.

[dstro003]

Great, thank you for the help!

[paul.r]

You’re welcome!