Megamenu icon position adjustment

Hi there,

Happy New Year and thanks for the support always.
We built a Megamenu based on HTML block (enclosed is the breakdown of menu items and locations)
I hope to adjust the position of the icon to be on top of the menu Text, (also enclosed an illustration of the Current VS Designed results)
As it’s more space-saving, we hope to achieve that. Could you help to check how to do that? Hope the code can be added directly in the Html Block Megamenu Container Custom CSS box.
Pls let me know if need other info, as this menu consists of several layers and might be confusion…

Best regards,
Luie

Attachments:

You must be logged in to view attached files.

Hi lswang6,

Thanks for reaching to us and appreciate your patience.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.elementor-widget-wd_mega_menu .wd-nav>li {
    width: 160px;
}

.elementor-widget-wd_mega_menu .wd-nav>li>a {
    flex-direction: column;
	font-size: 14px;
	font-weight: 500;
}

.elementor-widget-wd_mega_menu .wd-nav-img {
    margin-inline-end: 0;
	margin-bottom: 10px;
}

.elementor-widget-wd_mega_menu .wd-nav>li:is(.wd-has-children,.menu-item-has-children)>a:after{
	display: none;
}

Regards,

Hi Mr. Hung,
Thanks for your kind support. after adding the code to CSS, it takes effects and it’s almost perfect.
Just hope make it more perfect together by checking following left issue:

1. Font adjustment part not working:
.elementor-widget-wd_mega_menu .wd-nav>li>a {
flex-direction: column;
font-size: 14px;
font-weight: 500;
}

2. Whole menu display covered by Sticky naviation sidebar and need a offset to Right hand side: (Please refer to enclosed screen shot illustration)

3. Hope to adjust the menu default height as now is too high: (Please refer to enclosed screen shot illustration)

Hope to hear from you soon.

Best regards,
Luie

Attachments:

You must be logged in to view attached files.

Hi lswang6,

1. You can’t see the changes due to it same as Theme Settings > Typography > Basic https://ibb.co/nrnB3xX

2. How could you open Sticky navigation and categories menu at the same time?

3. You can set dropdown height via Dropdown height field https://ibb.co/682gpvk

Regards,

Hi lswang6,

1. You can’t see the changes due to it same as Theme Settings > Typography > Basic https://ibb.co/nrnB3xX
Answer: OK, I adjusted and now it’s in the desired situation, thank you for the checking guidancea and support.

2. How could you open Sticky navigation and categories menu at the same time?
Answer: My bad in the expression, the display issue it’s in the Scroll down sticky mode. I prepared a screenshot and desired result as enclosed for review, kindly help to have a look.

3. You can set dropdown height via Dropdown height field https://ibb.co/682gpvk

Attachments:

You must be logged in to view attached files.

3. You can set dropdown height via Dropdown height field https://ibb.co/682gpvk
Answer: After further checking, find out that Currently the height is effected by padding or margin. in the Menu i can set padding, but the bottom padding/margin can be be set in the menu(pls refer to enclosed screen shot, still need css code and can not find it in chrome inspect, coud you help to check that? (if make height taller, e.g. it works the way you guided…but this case i just hope the height to be lower..)

Attachments:

You must be logged in to view attached files.

[Author]

Posts