Mobile header

I have a mobile header menu, and I want CSS code to modify the tabs wrapper and tab priorities.

Also, I want the mobile header to be (make it overlay), while the desktop header should not be.

Also i want CSS code for ( active ) mobile header menu tab

Sorry for bothering you, also i want tab text css and active tab text css?
Thanks in advance

Also i want main footer CSS code

Hi medshow37,

Thanks for reaching to us and appreciate your patience.

Your question is a bit unclear to me. Please describe in more details or or your desired goal, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

In the mobile header menu shown in the attached image, I would like the CSS code for the following elements of the mobile header menu:

1. Tabs wrapper (tabs container)

2. Tabs

3. Active tab

4. Tab titles (text)

5. Active tab title (text)

Attachments:

You must be logged in to view attached files.

Hi medshow37,

Thanks for screenshot. However, you are referring to change their styles or more? Please describe in more details.

Regards,

Thank you for your cooperation. I kindly ask you to provide me with the following CSS code related to the mobile header menu:
1. Tabs wrapper (tabs container)
2. Tabs
3. Active tab
4. Tab titles (text)
5. Active tab title (text)
I will handle the styling and make the necessary edits myself.

Hi medshow37,

Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to mobile elements and change styles. https://ibb.co/pj7NdCk4

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

Kind Regards,

Wow, its amazing, your theme is flexible more than i expexted, but i still need css selector (class) for control size ot tabs height and width and etc.

CSS class (selector) for the following celement related to the mobile header menu:
1. Tabs wrapper (tabs container)
2. Tabs
3. Active tab
4. Tab titles (text)
5. Active tab title (text)

Hi medshow37,

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Regards,

On the mobile version of this page: medshow.net/blue,
I created the following tabs using the Elementor HTML widget. Previously, I asked you for the appropriate CSS selectors (classes) for the following components of the header bottom menu, to replicate a similar design:

Tabs wrapper (tabs container)

Tabs

Active tab

Tab titles (text)

Active tab title (text)

Below is the CSS code I used on the page I created:

/* Main container for the tabs */
.my-tabs-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh; /* Ensure the container fills full viewport height */
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Tabs container */
.my-tabs {
display: flex;
justify-content: space-around;
align-items: center;
height: 38px; /* Fixed height for tabs */
background-color: rgba(255, 255, 255, 0.95); /* Fallback background */
background: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
backdrop-filter: blur(5px); /* Apply blur effect (modern browsers) */
padding: 2px 0; /* Vertical padding */
border-top: 2px solid #0e0e96;
border-bottom: 2px solid #0e0e96;
position: relative;
z-index: 88;
box-sizing: border-box;
}

/* Individual tab styling */
.my-tab {
position: relative; /* For arrow positioning */
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: rgb(14, 14, 150); /* Default blue text */
padding: 10px 10px 5px; /* Top, horizontal, bottom */
text-align: center;
transition: color 0.3s ease, border-bottom 0.3s ease;
box-sizing: border-box;
}

.my-tab:hover {
color: #f4a51c; /* Orange on hover */
}

/* Active tab style */
.my-tab.active {
color: #fff;
background-color: #0e0e96;
border-bottom: none;
margin: 0 -6px; /* Slight overlap effect */
}

/* Arrow under the active tab */
.my-tab.active::after {
content: ”;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #0e0e96;
z-index: 3;
}

/* Tab content (hidden by default) */
.my-tab-content {
display: none;
overflow-y: auto;
max-height: calc(100vh – 40px); /* Full viewport minus tab height */
padding: 0 0 153px; /* Bottom space for potential footer or padding */
box-sizing: border-box;
}

/* Active tab content */
.my-tab-content.active {
display: block;
}

Hi medshow37,

Please allow me to explain: In this page https://medshow.net/blue/ the part you mentioned is Tabs widget while on the homepage it’s Header Bottom Menu so you can’t make it works same as Tabs. Or you are trying to make styling looks like Tab – colors and selected menu items?

Regards,
Hung PD

Yes,I’m not looking for a function, but rather the design. It’s true that tabs and menus differ in some functionality, but they are quite similar in design. If you could provide me with the CSS selector code not CSS attribute codes for the header bottom menu that resembles the one you previously shared, I would be able to replicate the same design.

عرض

Hi medshow37,

Thanks for your patience.

And in order to assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,
Hung PD

[Author]

Posts