WOODMART HEADER DESKTOP DIFFERENT TO MOBILE IN COLOR SCHEMES

This topic has 21 replies, 2 voices, and was last updated 10 months, 3 weeks ago by speango.

Viewing 22 posts - 1 through 22 (of 22 total)

Author

Posts
January 22, 2024 at 8:43 pm #532394

speango
Participant

Dear Sirs hi.

I am trying to achieve the following:

Main header settings.

I want to have the main header for desktop in white backround color and dark text color thene

and

the main header for mobile in blue (#0060AA) backround color and in light text color theme.

Is that feasable ? How can I achive that ?

Thanking you in advance.

Georgios

January 23, 2024 at 8:19 pm #532829
Hung Pham
Keymaster
Hello jakubsendal99,

Thanks for reaching to us.

1. Desktop

+ Background color: Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through the admin bar directly https://prnt.sc/Ct9ehRDvvDV9

Click on the Settings icon of Main header https://prnt.sc/6OIKfJKG_OeD > Style tab > and you can change background color https://prnt.sc/vdtEAb9YP9Mc

Please refer to documentation for more details:
https://xtemos.com/docs-topic/woodmart-header-builder/

+ Items color: You can go to Dashboard > Theme Settings > Typography > Advanced > there you can create a new Rule by clicking on + Add Rule > then select Main navigation links from the dropdown > then you can define the Color and another font styling for these accordingly: https://snipboard.io/xkdpBr.jpg

You can read more about Advanced Typography here: https://xtemos.com/docs-topic/advanced-typography-settings/

2. Mobile

+ Background color: Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile
```
.wd-nav-mobile{
	background-color: #0060AA;
}
```
+ Items color: You can go to Dashboard > Theme Settings > Typography > Advanced > there you can create a new Rule by clicking on + Add Rule > then select Mobile menu dropdown first level from the dropdown > then you can define the Color and another font styling for these accordingly https://prnt.sc/XDSAkQx6W8wW

Regards,
January 23, 2024 at 8:59 pm #532838

speango
Participant

Dear Hung Pham

Thank you for your reply. However the CSS code trasmited is for the mobile nav menu.

My target is as described to have the Mail Header backround color in the mobile blue color.

Therefore I repeat my request as follows:

I want to have the main header for desktop in white backround color and dark text color thene

and

the main header for mobile in blue (#0060AA) backround color and in light text color theme.

Is that feasable ? How can I achive that ?

Thanking you in advance.

Georgios

January 24, 2024 at 8:25 am #532926

Hung Pham
Keymaster

Hello jakubsendal99,

1. Did you try my instructions? It works for desktop navigation background color and menu items.

2. To assist you in the best possible manner, I kindly ask that you please include a screenshot that illustrates, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

January 24, 2024 at 9:08 am #532932

speango
Participant

Dear Hung thank you for your reply.

Yes we have followed your instructions but as I explained the only thing that changing after entering your CSS to the mobile section, was to have in blue the flyout menu background instead of the main mobile header in blue.

We have tried a workaround using the third header (bellow the main header) but this is temporarily as we may use this third header for other purposes.

January 24, 2024 at 9:10 am #532935

speango
Participant

some screen shots

Attachments:
You must be logged in to view attached files.

January 24, 2024 at 8:05 pm #533252

Hung Pham
Keymaster

Hello speango,

Thanks for details.

So, please remove Custom CSS code.

Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through the admin bar directly https://prnt.sc/Ct9ehRDvvDV9

Select Mobile > Click on the Settings icon of Main header https://prnt.sc/Ce0L_sVftzma > Style tab > and you can change background color https://prnt.sc/vdtEAb9YP9Mc

Regards,

January 24, 2024 at 8:17 pm #533256

speango
Participant

Dear Hung hi.

Thank you for your reply however.

In my end changing the main header mobile color also changes to the same color the desktop main header color – should they work independently ?

The same thing happens also for the style Text color scheme.

Your assistance is still needed.

Best regards
Georgios

January 24, 2024 at 8:33 pm #533260

Hung Pham
Keymaster

Hello speango,

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

Regards,

January 24, 2024 at 8:51 pm #533263

speango
Participant

Dear Hung

I enclosed credentials – thank you for your assistance.

Best regards
Georgios

January 25, 2024 at 10:43 am #533355

Hung Pham
Keymaster

Hello speango,

Thanks for details.

I helped you to change mobile header’s background color to blue black and light text https://prnt.sc/TYwfLZ0EQhVV

You can change logo on mobile as well to makes it more visible.

Regards,

January 25, 2024 at 10:52 am #533357

speango
Participant

Dear Hung

Thank you for your assistance to solve the matter with the appropriate CSS code provided.

Regards
Georgios

January 25, 2024 at 11:14 am #533378

Hung Pham
Keymaster

Hello speango,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

January 25, 2024 at 11:18 am #533381

speango
Participant

Dear Hung one more please

How do you make the mobile style text color scheme light ?

Georgios

January 25, 2024 at 11:25 am #533389

speango
Participant

white menu symbol

January 25, 2024 at 11:31 am #533393

speango
Participant

I enclose screen shot

Attachments:
You must be logged in to view attached files.

January 25, 2024 at 3:43 pm #533550

Hung Pham
Keymaster

Hello speango,

You can see Custom CSS I added to Theme Settings > Custom CSS > CSS for mobile section.

Regards,

January 25, 2024 at 4:11 pm #533590

speango
Participant

Hello.

We have implement the css style in the live site and indeed is working EXCEPT that the mangifing glass and humburger menu are in black color.

We have the same settings on live as in the development but still those two elements are in black colour.

Georgios

January 25, 2024 at 4:57 pm #533618

Hung Pham
Keymaster

Hello speango,

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

Regards,

January 25, 2024 at 5:09 pm #533628

speango
Participant

Dear Hung – I enclose the page-.

January 25, 2024 at 6:29 pm #533671

Hung Pham
Keymaster

Hello speango,

Go to Theme Settings > Typography > Advanced. In this area, you can use Custom Selector and assign elements like screenshot https://prnt.sc/Eyjck4Wsy-GI

.whb-mobile-right .wd-tools-element>a

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

Regards,

January 25, 2024 at 8:48 pm #533700

speango
Participant

Dear Hung

Yes, following your additional instructions, we have managed to fullfill our requirement.

Thank you for our assistance.

Georgios
Author

Posts

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘WOODMART HEADER DESKTOP DIFFERENT TO MOBILE IN COLOR SCHEMES’ is closed to new replies.

WOODMART HEADER DESKTOP DIFFERENT TO MOBILE IN COLOR SCHEMES

Attachments:

Attachments:

Create your WordPress website.