Header Menu Name direction change to bottom of menu icon

Hi , in my website ( presentsolution.lk) i have 2 menus , one is in the burger icon and another main menu in header , both are in bottom header menu , but i have created and given separated menu list for each ,

what i want is to change the main menu (not the burger icon menu ) name direction right in to bottom of the icon , i have attached a screenshot of the current header which is menu name directing to right side , but i want to make it bottom of the i con , i have attached a another screenshot how i want it to be , from another website called futurx.lk.

i want to change the menu name direction for specific menu name

Attachments:

You must be logged in to view attached files.

Hi presentsolution.tech,

Thanks for reaching to us.

1. Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through the admin bar directly https://prnt.sc/Ct9ehRDvvDV9 and configure the Header bottom https://prnt.sc/EFL-N0x7smpy to change the height of row https://prnt.sc/qrZiOHrp2w2O

Please check this Manual:
https://xtemos.com/docs-topic/how-to-setup-a-logo-image/

2. Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a,
.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img{
	text-align: center;
	display: block;
}

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img{
	margin-right: 0;
}

Regards,

Hi Thanks for your response , i did as you said it worked for desktop but not working for mobile view,

i paste the code for global and also tired with mobile too but desktop view only working as i request , how to enable the bottom header menu name under the icon in the mobile view too, ? i attached the current mobile view in the attachment.

Attachments:

You must be logged in to view attached files.

Hi presentsolution.tech,

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

https://presentsolution.lk/
for now there will be a mark ” . ” instead of menu names, you can check in both desktop and mobile the ” . ” is bottom of the icon in the desktop view and ” . ” is right side in the mobile view .

Hi presentsolution.tech,

Please remove previous code and add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a,
.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img,
.whb-header-bottom-inner .whb-col-mobile li>a,
.whb-header-bottom-inner .whb-col-mobile li>a img{
	text-align: center;
	display: block;
}

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img,
.whb-header-bottom-inner .whb-col-mobile li>a img{
	margin-right: 0;
}

Regards,

Thank you for your response i did as you said now its working for both devices but the menu icon is not in the middle , how can i align the icon middle of the menu names, screenshot attached , https://presentsolution.lk/

and also i have another doubt , can you provide codes for make checkout page postal code field optional instead of required .

Attachments:

You must be logged in to view attached files.

Hi presentsolution.tech,

1. Please remove previous code and add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a,
.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img,
.whb-header-bottom-inner .whb-col-mobile li>a,
.whb-header-bottom-inner .whb-col-mobile li>a img{
	text-align: center;
	display: block;
}

.whb-header-bottom-inner .whb-col-center .wd-nav >li>a img,
.whb-header-bottom-inner .whb-col-mobile li>a img{
	margin: 0 auto;
}

2. You can use Checkout fileds manager to make that filed optional. Please read more here https://xtemos.com/docs-topic/fields-manager/

Regards,

[Author]

Posts