header menu

What bothers me most about the header settings is that many of the desktop and mobile settings are synchronized and not separate.

Please help me in the following matters:
1. I want the main header to be sticky only on the mobile version.

2. I want the header bottom border to be active on desktop, but not active on mobile.

3. I want the sticky header bottom to have a row height of 60px on desktop and 40px on mobile devices.

4. I selected “Make it overlap” in the header settings, but the background color only became transparent on the header bottom, not on the main header, in both desktop and mobile views.

5. For the overlapping main header, I want the icon color to be white and to display a specific image.

6. Also, in the overlapping header bottom, I want the text and underline colors to be white.

“Sorry, in the second point, I meant the bottom border related to the header bottom, not the main header.”

Hello,

01, 02. 03. Unfortunately, it is not possible. The sticky header settings will be on both mobile and desktop.

04, 05, 06. Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

Please give css code for 01, 02. 03. And i will try to make it specific for certain pages.
CSS for Sticky header in general .
CSS for sticky header row height .
CSS for header bottom bottom border.

I also send you wp-admin for other problem.

Hello,

02. Please try to add the header bottom on your site so I can check and give you a custom css code to disable it on mobile.

04. Please check back your site, now the header builder is transparent on your site.

05. Can you please share some screenshots where you want to change the icons’ color?

06. To change the sticky menu color, try to add the following custom css code in Theme Settings > Custom CSS:

.whb-sticked .wd-nav[class*="wd-style-underline"] .nav-link-text {
    color: #000000 !important;
}

Best Regards,

Thank you for your cooperation. I have fixed the previous issues, and I would now like to request the following changes:

In the mobile version:

I need the CSS selector for the active bottom header menu item in both situations: stacked and normal.

I also want to change the underline color of the bottom header menu in both situations: normal and stacked.

Hello,

Please try adding the following Custom CSS in the Custom CSS area under Theme Settings >> Custom CSS.

.wd-nav.wd-style-underline .nav-link-text:after {
    background-color: #3c01ff !important;
}
.whb-sticked .wd-nav.wd-style-underline .nav-link-text:after {
    background-color: #01fd31 !important;
}

Best Regards,

Hello,

Please try adding the following Custom CSS in the Custom CSS area under Theme Settings >> Custom CSS.

.wd-nav.wd-style-underline .nav-link-text:after {
    background-color: #3c01ff !important;
}
.whb-sticked .wd-nav.wd-style-underline .nav-link-text:after {
    background-color: #01fd31 !important;
}

Best Regards,

Thanks, it works!
However, I have an issue after applying the first code that changes the text color to white. It also affects other areas — specifically, the mobile hamburger menu. The active underline color for categories and pages in the mobile menu also becomes white (see Image 1), whereas it should remain the original orange color (as in Image 2).

So, I would like to keep the active underline color in the mobile hamburger menu (categories and pages) as the original orange. Please help me make the code more specific so that it does not affect the mobile menu.

Also, you previously gave me these codes:

.whb-sticked .wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: #0e0e96 !important;
}

.wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: white !important;
}

These codes work perfectly, but now I want to customize the active link text — specifically its color and font-weight.

Thanks in advance!

Attachments:

You must be logged in to view attached files.

Illustrated images

Attachments:

You must be logged in to view attached files.

Hello,

To prevent the mobile hamburger menu from being affected, please try adding the following CSS code specifically for the desktop view only from Theme Settings > Custom CSS > Custom CSS for desktop. This way, the changes (like text color and font weight for active links) will not impact the mobile menu styling.

Best Regards,

Apologies, there was a misunderstanding, and I truly appreciate that—especially considering the workload you are dealing with.

My previous question consists of two parts:

—

First Part:

.wd-nav.wd-style-underline .nav-link-text:after {
background-color: #3c01ff !important;
}

I want this code to apply only on the mobile version, not on desktop.

After applying this code, it changes the text color to white, which also affects other elements—specifically, the mobile hamburger menu. The active underline color for categories and pages in the mobile menu also becomes white (see Image 1), whereas it should remain the original orange color (as shown in Image 2).

So, I think it would be better if you could provide me with a CSS rule that sets the active underline color for categories and pages in the mobile menu to its original color. I will then apply it only in the mobile version.

—

Second Part:

.whb-sticked .wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: #0e0e96 !important;
}

.wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: white !important;
}

These codes work perfectly, but they apply to the inactive state of the menu text for both sticky and non-sticky bottom header menus.

What I need now is a similar set of CSS rules, but for the active state of the menu text in both sticky and non-sticky bottom header menus.

Hello,

01. Try to add the previous code only for the desktop area and use the following code for mobile menu items.

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

.wd-nav-mobile>li>a {
    color: blue !important;
}

02. Could you please share the URL of the page where the active menu is set? Since you’re using a custom link in the menu, I’m currently unable to identify which menu item is marked as active on your site.

Best Regards,

A Simple Misunderstanding

I have created a custom header for the mobile version only, inspired by the mobile homepage of the well-known website m.shein.com, thanks to the features provided by the Woodmart theme.

This custom header includes an overlay feature, and I have implemented it on five specific pages on mobile version only
1- https://medshow.net/
2- https://medshow.net/%d8%b7%d8%a8-%d8%b9%d8%a7%d9%85/
3- https://medshow.net/%d8%a3%d8%b3%d9%86%d8%a7%d9%86/
4- https://medshow.net/%d9%85%d8%ae%d8%aa%d8%a8%d8%b1%d8%a7%d8%aa/
5- https://medshow.net/%d8%aa%d8%ac%d9%87%d9%8a%d8%b2%d8%a7%d8%aa/
to serve as the mobile version homepage. I also added custom CSS targeting the IDs of these pages in the Mobile CSS file (see Image 1).

The rest of the website pages use a different header that does not include the overlay feature.

Here’s what I want to clarify:

now , I would like to modify the design of the Bottom Menu item in the hompage mobile header bottom menu, but only to style the active link in that menu.

You previously provided me with some CSS code,
.whb-sticked .wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: #0e0e96 !important;
}

.wd-nav[class*=”wd-style-underline”] .nav-link-text {
color: white !important;
}

but now I specifically need CSS targeting the active menu item, so I can change the following:

Text color

Font weight

Font size

Font family

The goal is to make the active link text stand out from the other items in the Bottom Menu of both the sticky and non-sticky versions of the homepage mobile header.

In short, I need CSS code for styling the active link text in the Bottom Menu of both sticky and non-sticky headers, applied only to the mobile version homepage on the pages mentioned above. like this image 2

I also requested the code that allows me to control the underline color for the active item only in the categories or pages section of the mobile menu.
See Image 3, encircled in red.

i am dont requested the code that controls the text color of the main menu items, as this code you sent me:

.wd-nav-mobile > li > a {
color: blue !important;
}

Attachments:

You must be logged in to view attached files.

Hello,

Could you kindly share screenshots highlighting the specific area where you want to achieve the changes, along with the page URL. This will help me better understand your concern and guide you more effectively.

Best Regards,

This custom header includes an overlay feature, and I have implemented it on five specific pages on mobile version only
1- https://medshow.net/
2- https://medshow.net/%d8%b7%d8%a8-%d8%b9%d8%a7%d9%85/
3- https://medshow.net/%d8%a3%d8%b3%d9%86%d8%a7%d9%86/
4- https://medshow.net/%d9%85%d8%ae%d8%aa%d8%a8%d8%b1%d8%a7%d8%aa/
5- https://medshow.net/%d8%aa%d8%ac%d9%87%d9%8a%d8%b2%d8%a7%d8%aa/

specific area where i want to achieve the changes is header bottom menu as illustrated in attached image

Attachments:

You must be logged in to view attached files.

Hello,

You are already using the custom css code for these menu items in Theme Settings > Custom CSS.

Navigate to Theme Settings > Custom CSS and in the custom css for mobile area, check the code and change the font settings in the code.

Best Regards,

In short, I need CSS code for styling the active link text (active item only) in the Bottom Menu of both sticky and non-sticky headers, not all items

Hello,

Unfortunately, it’s not possible to provide custom CSS for the active menu item in this case. It looks like you’re already using a significant amount of custom CSS. We recommend reviewing your existing code under Theme Settings > Custom CSS and adjusting the color from there as needed.

Best Regards,

Ok , just give me the CSS code for active link in header bottom

Ok , just give me the CSS code for active link in header bottom for both sticky and non-sticky

I was solved issues,
Thank you
You can close the topic

Hello,

Sounds great that your issue has been solved.

You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts