Cosmos style issue with nav_menu

[corey-dawson]

Cosmos style has undesirable results when using Python Shiny's nav_menu as seen below. The issue is:

1. nav_menu ribbon is light gray
2. nav items color is white (almost cant see)

image of issue

Note that the nav items are there, just very hard to see. Only one item highlights black on hover

code to see issue

from shiny import App, Inputs, Outputs, Session, reactive, render, ui
import shinyswatch

app_ui = ui.page_navbar(
    shinyswatch.theme.cosmo(),
    ui.nav_menu(
        "Config",
        ui.nav_panel(
            "Config 1"
        ),
        ui.nav_panel(
            "Config 2"
        ),
    ),
    ui.nav_menu(
        "Results",
        ui.nav_panel(
            "Results 1"
        ),
        ui.nav_panel(
            "Results 2"
        ),        
    )
)

def server(input: Inputs, output: Outputs, session: Session):
    print("do stuff")
    
app = App(app_ui, server)

In addition to any possible fix, can you provide CSS that can be used to overwrite this navbar behavior (only the navbar menu at the top) of the theme for the short-term? I tried overwriting the class .nav with the same background color as the buttons, however, was not successful in getting the full nav bar background color to change. The rest of the theme is spot on for me. Thanks in advance!

.nav {background-color: #373a3c}

[corey-dawson]

Additionally, using the nav_menu, whether in a page_navbar or in a navset_bar, has troublesome styling with many of the themes

[Rebekah-Chuang]

Hi I'm having the same issue, the text colors are too bright in most themes.

[schloerke]

Looks like an upstream fix is coming. Will need to update dependencies once posit-dev/py-shiny#1124 lands