Limitations of the header builder – Different settings across desktop/mobile

Dear,

The header builder has a major limitation that it’s not possible to define different ROW settings across desktop & mobile. I managed to find most of the css class to fix it but I still face one small issue in the mobile version. Therefore, I’d need your help to fix it.

Please check the video in private. The issue is that on mobile, the menu & cart icons are displayed in grey but they should be white. To make things easier for you, I’ve kept on this staging only the custom code related to the header.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

1. Switch to the mobile view of the Header builder: http://prntscr.com/iyd3v3

2. Enter the row which contains the menu and cart: https://prnt.sc/tgs4oi set the “Light” text in the Color tab https://prnt.sc/tgs5js

Each row has the option to set the height as well.

Best Regards

Hi Elise,

That’s the problem actually. If I change this Light/Dark value in the row for mobile as you say, it will change it as well for desktop. This is a limitation of the header builder.

If I define this value to “Dark” on mobile, then I must have a custom CSS code for desktop only to define the same value to “Light”.

Can you help to get such custom code, please?

Thanks

Hello,

I am checking your site and see that cart and menu are white https://prnt.sc/tgw5uw both on mobile and on the desktop https://prnt.sc/tgw6vz

Best Regards

Elise,

This is the live site that you’re checking. I gave you a link to the staging site where I modified the configuration, I moved elements across levels of headers.

Please check the staging provided above, not the live site.

THanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.whb-color-light .wd-tools-element > a {
    color: red;
}

Set the color as per your needs.

Best Regards

I think we’re not understanding each other, I made another video that explains clearly what I want. Please check it, see private.

THanks

Hello,

I understand your purpose https://prnt.sc/the2tl but I do not understand the reason. You can sent any background for this row, and text would remain light.

Here is the code to change the color of the text:

body .whb-color-dark .navigation-style-default .item-level-0>a {
    color: red;
}

Buttons have option to set custom text and background color.

Best Regards

Dear,

Please re-check carefully the last video, I have explained clearly in detail what I want & why I need it. The header builder has a limitation that it is not possible to define different dark/light color for different elements across the same header level.

I need the highlighted part (in attachment below) to be displayed in BLACK. However, I need to do it manually by CSS because if I change this value in the header, then the “menu/cart” icons on the MOBILE version of the same level would then become black too (which I don’t want).

If you did not understand this request, please check it with your colleagues because I can’t explain it more clearly sorry. I tried your code and it doesn’t work for this purpose.

Thanks

I forgot the attachment sorry, here it is.

Attachments:

You must be logged in to view attached files.

Hello,

This code is applicable only to menu items regardless of the color you have chosen in the Header builder.

body .navigation-style-default .item-level-0 > a {
    color: red!important;
}

There is no option to disable the color scheme.

Best Regards

Dear,

With the “!important” it now works but partially. If you check the attachment below, the text is now being displayed in black as I wish but the arrows next to them is still white, so the code is not full yet. Can you please adjust the provided code to also be able to modify the color of the arrows please?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .navigation-style-default .item-level-0>a:after {
    color: red!important;
}

Best Regards

That’s perfect, thanks!

You can close this ticket

Sorry 1 more thing, on the same topic.

I deployed the new menu on my production site, but I still need shortcode for a missing part. If you check the live site in private, you’ll see the “underline” is still white. Can you provide also custom code for making it another color?

THanks

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .whb-color-light .navigation-style-underline .item-level-0>a .nav-link-text:after {
    background-color: red;
}

Best Regards

Dear,

Maybe I explained my self wrong but that’s not what I requested. Please check the last attachment again, you will see that there is an “underline” UNDER the menu title and that’s what is still white. How can I make this “underline” itself another color?

Thanks

Hello,

Do you mean the staging or live site?

Add this code it should work on both:

body .navigation-style-underline .item-level-0>a .nav-link-text:after {
    background-color: red!important;
}

Best Regards

No I said on the live site. You’re not reading what I write… please read carefully my very last request.

Hello,

The code is workable. Please clean your cache.

Best Regards

Sorry indeed it was cache issue. Thanks
You can close this ticket

[Author]

Posts