Shiny App自定义CSS后选中tabPanel导航栏不高亮如何调整

问题原因 #

你设置的CSS中将导航栏底色和选中导航项的背景色指定为了同一个色值#02BE7F，二者视觉上完全融合，所以看不出选中状态的区分效果。

解决方案 #

将选中导航项的背景色调整为和导航栏底色有明显区分度的颜色即可，推荐优先使用同色系的深浅不同色值，保持整体风格统一，比如选择深一点的绿色#019966，你也可以根据自己的审美需求更换为其他色值。

将你原有ui代码里的style部分替换为如下内容即可生效：

tags$head(tags$style(HTML('.navbar-static-top {background-color: #02BE7F;}
                          .navbar-default .navbar-nav>.active>a {background-color: #019966;}'))),

如果需要进一步调整选中状态的样式，还可以额外添加字体颜色、边框等属性，比如设置选中项字体为白色：

.navbar-default .navbar-nav>.active>a {color: #fff; background-color: #019966;}

内容的提问来源于stack exchange，提问作者Antonio