header menu

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

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.

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.

Illustrated images

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.

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

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

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

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

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