how to customize the mobile head meau style?
-
Hi,
I am editing the mobile head menu. met some problems and don’t know how to solve
1. how to change the width of mobile menu? I’d like to make it wider.
2. how to change the each row of menu’s color? and how to control the hover color for each items font and background color?
3. how to change the arrow into plus when expanding?
Best reagrds.
Cathy
Attachments:
You must be
logged in to view attached files.
Hello,
Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.
.mobile-nav.wd-side-hidden {
--wd-side-hidden-w: 420px; /* set your desired width */
}
/* Change text color per menu item */
.wd-nav-mobile > li:nth-child(1) > a {
background: #374fdc;
color: #f60000 !important; /* text color */
}
.wd-nav-mobile > li:nth-child(2) > a {
background: #fff5f5;
color: #0a21ff !important;
}
.wd-nav-mobile > li:nth-child(3) > a {
background: #f5fff7;
color: #333333 !important;
}
/* Hover text color */
.wd-nav-mobile > li:nth-child(1) > a:hover {
color: #9d6868 !important;
}
.wd-nav-mobile > li:nth-child(2) > a:hover {
color: #666666 !important;
}
.wd-nav-mobile > li:nth-child(3) > a:hover {
color: #777777 !important;
}
.wd-nav-mobile .wd-nav-opener:after {
content: "\f143" !important;
}
Best Regards,
Dear Aizaz,
Really appreciated for your help. I will try to use it for styling.
Here I met another problem with the head style, need CSS as well.
the Gtranslate on head shows quite well in desktop, but when it come to the mobile, it looks very strange again. could you help to write a piece of css code again for me? really very thanks for your help.
Attached you will find the style.
By the way, how to hide the rating star in the product archieve and single product? I find nowhere to set it in the theme setting.
Best regards
Attachments:
You must be
logged in to view attached files.
Hello,
01. Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.
.gtranslate_wrapper .gt_selector {
color: #ffffff;
padding: 4px 8px;
border: none;
margin-bottom: 25px;
}
/* Dropdown options */
.gtranslate_wrapper .gt_selector option {
color: #000000;
background-color: #ffffff;
}
02. Please try the following CSS in Theme Settings > Custom CSS:
.wd-product .star-rating {
display: none;
}
.single-product .woocommerce-product-rating {
display: none;
}
Best Regards,
Dear Aizaz,
Really appreciated for your kind help.
— The star rating hiding is active, but I am afraid that need to add one more line code for quick-view product also hide the star rating,
— very sadly, the css code of Gtranslate for mobile head showing still not actived.
Best regards
Cathy
Hello,
To hidethe star rating on quick view, try the following CSS in Theme Settings > Custom CSS:
.wd-popup-quick-view-wrap .woocommerce-product-rating {
display: none;
}
Regarding the GTranslate I have checked your site and the color is changing fine. Please check back your site and check the issue after completely clearing the site/browser cache.
Best Regards,
.
