How can I customized the color of each tab of the navbar

[Yurii Orishchuk]

Hi Aeneas,

Here is code for your goals(only for item with name "navInWork" duplicate it to get it work for other items):

pre

html body a[name=navInWork].ui-btn.ui-btn-active {
background: #0f0;
font-weight:bold;
color: red;
}
html body a[name=navInWork].ui-btn {
background: #f00;
font-weight:normal;
}

/pre

Regards.

[Bruce Stuart]

I have a navbar at the bottom of my 'home' screen called navbar_home.... I've tried these variants -- what's the secret sauce here:

[name=page_home_navbar_home] .ui-btn-inner {
background-color: red;
}
[name=page_home_navbar_home] .ui-btn-inner:hover {
background-color: green;
}

[name=navbar_home]{
background-color:red!important;
}

[name=page_home_navbar_home]{
background-color:red!important;
}

[name=navbar_home] .ui-btn-inner {
background-color: red;
}
[name=navbar_home] .ui-btn-inner:hover {
background-color: green;
}

[Evgene Karachevtsev]

Bruce,

Please give your NavBar Class Name at Properties panel(for example, myNavBar)
And use this CSS instead yours:

pre.myNavBar ul li a {
background-color: red!important;

}
.myNavBar ul li a:hover {
background-color: green!important;

}/pre

[Bruce Stuart]

Evgene,

Thanks!!!

Appreciate the tip....

Best,

Bruce

[Kal]

Hi, I came across this topic researching how to change the background color of a NavBar item dynamically in JavaScript. Based on what I saw here, and my general knowledge, I thought this would work:

$("a[dsid='mobilenavbaritem_80'].ui-btn-inner").css('background-color', 'red');

This does not work.

Also, just to see if it works, I tried Kateryna's example like this:

[name=mobilenavbaritem_80] .ui-btn-inner {
background-color: red;
}
[name=mobilenavbaritem_80] .ui-btn-inner:hover {
background-color: green;
}

Nothing changes.

What is going on? Any clues will be appreciated!

Thanks,
-Kal.

[Alena Prykhodko]

Please take a look here https://devcenter.appery.io/documenta...