How to Move Navigation menu icon Above the menu text

Hi there,

Thank you so much for your kind support on the building of our new website. now it is heading towards a finishing stage.
Just have a place that we hope to make it perfect: in the Header Bottm, we add a Menu, set icon for item. but we hope to make it Above the menu Text, like showed enclosed photo. is there a way we can do that?
the reference effects is: https://www.philips.co.uk/

Thanks again for your kind support. will purchase more for other sub regional market websites.

Regards,
Luie

Attachments:

You must be logged in to view attached files.

Hello lswang6q,

Thanks for reaching to us.

Please add above Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Desktop:

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

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

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

.whb-header-bottom .wd-nav-secondary.wd-nav>li>a .wd-nav-img{
    margin: 10px auto;
}

Best Regards,

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

Attachments:

You must be logged in to view attached files.

sorry add one more thing: the Navigation menu icon vertical-align issue. Enclose is the current one, we hope to align it center (vertical direct) as the Mega market case.

Attachments:

You must be logged in to view attached files.

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;
}

Leaving only Margin issue (not aligned to center, as enclosed photo shown)
Can you help to go through my current code and help me align the icon to the text center?

kind regards,
Luie

Attachments:

You must be logged in to view attached files.

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

Attachments:

You must be logged in to view attached files.

Hi lswang6,

It’s actually there is arrow here https://ibb.co/vHPX4KK but it was hidden by the custom css Please remove it and you will see it looks better https://ibb.co/M6qGcnC

Regards,

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

Attachments:

You must be logged in to view attached files.

Hi lswang6,

Thanks for your patience.

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS to remove arrows:

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

Also, the gap between columns are same, and there are no way to center container based on icons only. https://ibb.co/LCmgJkQ

Regards,

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)

Attachments:

You must be logged in to view attached files.

Hi lswang6,

Please use below code:

.whb-header-bottom .wd-nav>li:is(.wd-has-children,.menu-item-has-children)>a:after{
	display: none;
}

/* Predefined 120px columns */
.whb-header-bottom .wd-nav>li{
	width: 120px;
text-align: center;
}

Regards,

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!

Hi lswang6,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts