Change mega menu items font colours & size

Hello,

I am using multiple mega menus on my website and would like a way to be able to change the colour and size of one specific mega menu items from black to white and a bigger size. I do not want to change all the mega menu colours just one in particular. The one I want to change is a mega menu in the horizontal position, style is default and item gap is small, no title. For the dropdown i am using HTML block so I do not need to change any as i can do it with elementor. However, I cannot change the menu items (pages added to the menu in wordpress –> appearance –> menu). Would I do that with a css and if so how can I make sure that only a specific mega menu is affected by it or would that require paid customization?

Thanks

Hello,

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

Hello,

Thanks for the answer. Unfortunately, I do not know the custom selector and if I did, it would modify it for all the mega menus used in my website not just one in specific.

I added a a class id for the specific menu I want to change the color. The class id is: megamenuwhite . Could I get a css that change the colour for that specific menu including the class id?

If you just give me the general css code, I should be able to figure out how to implement it so that it only applies to that specific class id. Thanks

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

We will also need screens to see which items you want to change.

Best Regards

Sounds good.

Everything is explained on the picture. if you would like to access the header its in the theme builder of elementor.

Here is the pciture

Attachments:

You must be logged in to view attached files.

[Elise Noromit]

Hello, I saw that you have added me into a google doc share document named: menu_html. I am just wondering what am I supposed to do with the following code that was in the document:

[vc_row css=".vc_custom_1450200347789{margin-bottom: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}"][vc_column width="3/4" css=".vc_custom_1450200681524{border-right-width: 1px !important;padding-top: 0px !important;padding-right: 20px !important;padding-bottom: 0px !important;border-right-color: #e0e0e0 !important;border-right-style: solid !important;}"][vc_row_inner css=".vc_custom_1450200676853{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 0px !important;}"][vc_column_inner width="1/3" css=".vc_custom_1446742142663{margin-bottom: 0px !important;}"][vc_column_text css=".vc_custom_1449509832306{margin-bottom: 10px !important;}"]
<ul id="" class="sub-menu">
	<li id="" class=""><a href="http://dev.xtemos.com/new/product-category/woman/">Shop Styles</a>
<ul id="" class="sub-sub-menu">
	<li id="" class="item-with-label item-label-new"><a href="http://dev.xtemos.com/new/shop/?shopmasonryalt">Masonry grid <span class="menu-label menu-label-hot">HOT</span></a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shop_alt">Alternative shop</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shophover1">Default style</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shophover2">Button on hover</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shophover3">Button hover alt</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shophover4">Hover info</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shopfullwidth">Full width</a></li>
</ul>
</li>
</ul>
[/vc_column_text][vc_column_text css=".vc_custom_1450200739500{margin-bottom: 0px !important;border-right-width: 1px !important;border-right-color: #e0e0e0 !important;border-right-style: solid !important;}"]
<h5 style="text-transform: uppercase; font-weight: bold; margin-bottom: 5px;"><i class="fa fa-truck" style="margin-right: 7px; font-size: 14px;"></i>Free Shipping</h5>
Free for $50+ orders[/vc_column_text][/vc_column_inner][vc_column_inner width="1/3" css=".vc_custom_1446742137800{margin-bottom: 0px !important;}"][vc_column_text css=".vc_custom_1446742246153{margin-bottom: 10px !important;}"]
<ul class="sub-menu">
	<li><a href="http://dev.xtemos.com/new/shop/woman/jur-detail-jacket/">Product Pages</a>
<ul class="sub-sub-menu">
	<li><a href="http://dev.xtemos.com/new/shop/woman/jur-detail-jacket/?thumbsbottom">Thumbnails bottom</a></li>
	<li class="item-with-label item-label-hot"><a href="http://dev.xtemos.com/new/shop/man/yentre-zipper-cloth-coat/">Extra content <span class="menu-label menu-label-hot">HOT</span></a></li>
	<li class="item-with-label item-label-new"><a href="http://dev.xtemos.com/new/shop/woman/virror-detail-cape/?productsticky">Sticky details <span class="menu-label menu-label-new">NEW</span></a></li>
	<li><a href="http://dev.xtemos.com/new/shop/woman/erinted-dress-with-trimming/?imagelarge">Image Large</a></li>
	<li class="item-with-label item-label-sale"><a href="http://dev.xtemos.com/new/shop/accessories/bags/ethnic-jacquard-backpack/">Variations images</a></li>
	<li><a href="http://dev.xtemos.com/new/shop/watches/gabric-band-watch/?productdefault">Default styles</a></li>
	<li><a href="http://dev.xtemos.com/new/shop/watches/eart-metallic-watch/?prodright">Sidebar right</a></li>
</ul>
</li>
</ul>
[/vc_column_text][vc_column_text css=".vc_custom_1450200743463{margin-bottom: 0px !important;border-right-width: 1px !important;border-right-color: #e0e0e0 !important;border-right-style: solid !important;}"]
<h5 style="text-transform: uppercase; font-weight: bold; margin-bottom: 5px;"><i class="fa fa-phone" style="margin-right: 7px; font-size: 14px;"></i>Buyer Support</h5>
Get in touch 24/7[/vc_column_text][/vc_column_inner][vc_column_inner width="1/3" css=".vc_custom_1446742132151{margin-bottom: 0px !important;}"][vc_column_text css=".vc_custom_1450376455217{margin-bottom: 10px !important;}"]
<ul id="" class="sub-menu">
	<li id="" class=""><a href="http://dev.xtemos.com/new/product-category/man/">Shop Pages</a>
<ul id="" class="sub-sub-menu">
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shop2">2 Columns</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shop3">3 Columns</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shop4">4 Columns</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shop6">6 Columns</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shopleft">Sidebar Left</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shopright">Sidebar Right</a></li>
	<li id="" class=""><a href="http://dev.xtemos.com/new/shop/?shopnosidebar">No sidebar</a></li>
</ul>
</li>
</ul>
[/vc_column_text][vc_column_text css=".vc_custom_1450200747460{margin-bottom: 0px !important;}"]
<h5 style="text-transform: uppercase; font-weight: bold; margin-bottom: 5px;"><i class="fa fa-support" style="margin-right: 7px; font-size: 14px;"></i>Total Security</h5>
Secure checkout[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width="1/4" basel_color_scheme="dark" css=".vc_custom_1446572508036{padding-left: 20px !important;}"][basel_posts slides_per_view="1" hide_pagination_control="yes" hide_prev_next_buttons="yes" posts_query="size:1|order_by:date|post_type:product|tax_query:49"][/vc_column][/vc_row]

• This reply was modified 2 years, 9 months ago by Elise Noromit.

Hello,

We could hardly share any documents, I will check and advise.

Please have a look at the screen: https://gyazo.com/f060d955ef7035a22c1d0e658545d4eb

It would help if you chose these selectors.

If you have any questions please feel free to contact us.

Best Regards

I figured it out. You can close the topic now :). Thanks

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts