XF 2.2 Change the colors of the icons in the header on the phone

[RomainBrn]

Bonjour,

I would like to change the colors of my icons in my header on the phone as they currently have the same color as the background.

Merci.

 

[TPerry]

Are you using a custom style?
For mine, I use the below code (I set custom icons for my items)

/* NavBar modifications */
.p-navEl a:before, .p-navEl :before,.offCanvasMenu--nav :before, .p-nav-list .p-navEl a.p-navEl-link:before {
    .m-faBase();
/*    display: inline-block;*/
    text-align: center;
/*    margin-right:5px;*/
    border-radius:30px;
    line-height:normal;
}

.offCanvasMenu--nav a[data-nav-id='home']:before,.p-navEl a[data-nav-id='home']:before {.m-faContent("@{fa-var-home}");}
.offCanvasMenu--nav a[data-nav-id='forums']:before,.p-navEl a[data-nav-id='forums']:before {.m-faContent("@{fa-var-comments}");color: #fc8a21;}
.offCanvasMenu--nav a[data-nav-id='whatsNew']:before,.p-navEl a[data-nav-id='whatsNew']:before {.m-faContent("@{fa-var-question}");color: #faf08c;}
.offCanvasMenu--nav a[data-nav-id='members']:before,.p-navEl a[data-nav-id='members']:before {.m-faContent("@{fa-var-users}");color: cyan;}

.offCanvasMenu--nav a[data-nav-id='xfrm']:before,.p-navEl a[data-nav-id='xfrm']:before {.m-faContent("@{fa-var-download}");color: #ee5f78;}
.offCanvasMenu--nav a[data-nav-id='xfmg']:before,.p-navEl a[data-nav-id='xfmg']:before {.m-faContent("@{fa-var-camera-retro}");color: #93f8fc;}
.offCanvasMenu--nav a[data-nav-id='xa_showcase']:before,.p-navEl a[data-nav-id='xa_showcase']:before {.m-faContent("@{fa-var-planet-ringed}");color: #db52db;}
.offCanvasMenu--nav a[data-nav-id='xa_ams']:before,.p-navEl a[data-nav-id='xa_ams']:before {.m-faContent("@{fa-var-pencil}");color: #bdf406;}
.offCanvasMenu--nav a[data-nav-id='xa_cas']:before,.p-navEl a[data-nav-id='xa_cas']:before {.m-faContent("@{fa-var-dollar-sign}");color: #04cf04;}
.offCanvasMenu--nav a[data-nav-id='xa_ld']:before,.p-navEl a[data-nav-id='xa_ld']:before {.m-faContent("@{fa-var-link}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='xa_rms']:before,.p-navEl a[data-nav-id='xa_rms']:before {.m-faContent("@{fa-var-atom}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='xa_ubs']:before,.p-navEl a[data-nav-id='xa_ubs']:before {.m-faContent("@{fa-var-blog}");color: #f4b4fa;}
.offCanvasMenu--nav a[data-nav-id='xa_ims']:before,.p-navEl a[data-nav-id='xa_ims']:before {.m-faContent("@{fa-var-clipboard-list}");color: #9c95c6;}
.offCanvasMenu--nav a[data-nav-id='tl_groups']:before,.p-navEl a[data-nav-id='tl_groups']:before {.m-faContent("@{fa-var-user-friends}");color: #a5f4ae;}
.p-navEl [data-nav-id='astroutil']:before {.m-faContent("@{fa-var-tools}");color: #fd9ab0; display: block; text-align: center; margin-left: auto;
    margin-right: auto; padding-right: 30px;}
.offCanvasMenu--nav [data-nav-id='astroutil']:before{.m-faContent("@{fa-var-tools}");color: #fd9ab0;}
 


/* Navtab menu using FontAwesome 5 */

but it is specific for the style I am using also.

 

[RomainBrn]

Hello, yes I am using the Fury theme from DohTheme: https://www.dohtheme.com/community/products/fury.49
Attached is a picture of my problem.
Thanks for your help.

 

[TPerry]

Hello, yes I am using the Fury theme from DohTheme: https://www.dohtheme.com/community/products/fury.49
Attached is a picture of my problem.
Thanks for your help.

It is generally recommended when inquiring about add-on issues or issues with a style that is in the resource manager, you utilize that discussion thread. If it is an add-on/style that is not in the RM here, it's better to address it on the developers site, as they may do certain things that are not "default" in their presentation.
I'll tag @DohTheme to see if they can step in here to assist.

 

[DohTheme]

in the "app_nav.less" template search for:

@media (max-width: @xf-publicNavCollapseWidth)
{
    .p-nav
    {
        background-color: @xf-dt_grad_color1;
        background-image: linear-gradient(90deg, @xf-dt_grad_color1 0%, @xf-dt_grad_color2 100%);
        color: @xf-textColorEmphasized;
    }

remove this:

color: @xf-textColorEmphasized;

 

[RomainBrn]

in the "app_nav.less" template search for:

@media (max-width: @xf-publicNavCollapseWidth)
{
    .p-nav
    {
        background-color: @xf-dt_grad_color1;
        background-image: linear-gradient(90deg, @xf-dt_grad_color1 0%, @xf-dt_grad_color2 100%);
        color: @xf-textColorEmphasized;
    }

remove this:

color: @xf-textColorEmphasized;

Great it worked !
Thank you for your help.
Good day !