How to Move Navigation menu icon Above the menu text

Hello Mr. Hung,

Thanks for your magic code, it works immediately. and basd on your code direction, I tried to explore by chrome inspector and change the icon image height and size, it worked 50% (as other element also changed size together:
the live link thant exposed the issue is: (also enclosed screen shot)
https://philips-smart.com/products/cassette-type-split/

the code I am using based on your magic guidance is:
/* Put icon above navigation menu text, and change icon size, padding */

/* Navigation Dropdown Visibility */
.wd-nav[class*=”wd-style-“]>li:is(.wd-has-children, .menu-item-has-children)>a:after {
visibility: hidden;
}

/* Navigation Images */
.wd-nav-img,
.wd-sub-menu li>a img {
max-height: var(–nav-img-height, 60px);
padding-bottom: 10px;
}

/* Header Bottom Navigation */
.whb-header-bottom .wd-dropdown {
margin-top: 10px !important;
}

.whb-header-bottom .wd-nav-secondary.wd-nav {
align-items: center;
}

.whb-header-bottom .wd-nav-secondary.wd-nav>li>a {
height: auto;
display: block;
}

.whb-header-bottom .wd-nav-secondary.wd-nav>li>a .wd-nav-img {
display: block;
margin: 0 auto;
}

So the request become:
1. How to change only the icon navigation menu image height? (not change other items in the page)
2. Also how to change the Navigation menu dropdown menu icon? it is really too small 20px;

Thank you and we have rated 5 star for produc and excellent service. will purchase more for sub distributors.

kind regards,
Luie

Hello Mr. Hung, sorry it’s my mistake tried to change the height but effected other items. with help to gpt and other docs, I am now using below new code, and it works fine: (for all my requests)

/* Put icon above navigation menu text, and change icon size, padding */

/* Navigation Dropdown Visibility */
.wd-nav[class*=”wd-style-“]>li:is(.wd-has-children, .menu-item-has-children)>a:after {
visibility: hidden;
}

/* Navigation Images (Scoped to specific navigation menus) */
.whb-header-bottom .wd-nav-secondary.wd-nav .wd-nav-img,
.whb-header-bottom .wd-nav-secondary.wd-nav .wd-sub-menu li>a img {
max-height: var(–nav-img-height, 60px);
padding-bottom: 10px;
}

/* Header Bottom Navigation */
.whb-header-bottom .wd-dropdown {
margin-top: 10px !important;
}

.whb-header-bottom .wd-nav-secondary.wd-nav {
align-items: center;
}

.whb-header-bottom .wd-nav-secondary.wd-nav>li>a {
height: auto;
display: block;
}

.whb-header-bottom .wd-nav-secondary.wd-nav>li>a .wd-nav-img {
display: block;
margin: 0 auto;
}

Noticed that the space between icons is different. (enclosed photo)
so the inquiry are summarized as
1. Text align center in the block.
2. icon spaces to be the same set value.

I know it’s crazy that post so many things on this ticket…hope you can help me out..

best regards,
Luie

Hello Mr. Hung,
Thanks for the checking.
Yes was try to remove the arrow, seems not successful. we still hope to remove it and keep left navigation text aligned center.
Enclosed i tried to delete the hidden part. but the gap between icons till not the same. so we still hope:
1. remove arrow in other way?
2. Navi text center
3. icon gaps the same size..
Could you help to adjust the code?

regards,
Luie

Hello Hung,

Good day to you.
Glad to hear from you.

I tested and tried the code. but It removes all the arrows in the main header and bottom header. A bit out of our expectations. Maybe i did’t make it clear in the communication. so i summarize the only left two small issue and hope you can help to finalize them with us: (as enclosed photo also)

1. We hope to: remove arrows in the bottom header only; keep the arrows for those text items in Main header;
2. On the space gap, can we define the Width of each colunm item? (say 120px for present, we can manual change it later)

Thanks a bunch, Hung! It’s working great!

We really appreciate your kindness and patience in helping us out. With your support, we feel like anything is possible. God bless you!