How to style top Navbar through st.navigation

Using Streamlit
1

I was excited about the navbar feature introduced in st.navigation but to my surprise, not much work is done from the style perspective. It looks ugly and I couldn’t find any way to make it beautiful.

What am I looking for?

  • How to add the Logo on the left of Top Navbar, considering I am not using Sidebar at all
  • How to change the color of the Top Navbar to highlight it. With current design, rather than Navbar it looks more like bunch of options arranged in horizontal manner with no differentiation between the rest of the body

Appreciate any input..Thanks in advance!

2

Hi @Vicky15,

You can add a logo with st.logo, and you can access the navbar with css like this:

st.logo(
    "https://streamlit.io/images/brand/streamlit-logo-primary-colormark-darktext.png"
)

st.html("""
<style>
.stAppHeader {
    background-color: green;
}
</style>
""")
3

Thanks @blackary, This really helps.

Further i tried adding below css to move the menu to the right side but i am unable to move it to complete right, still it shows some space, probably due to the Streamlit “Deploy” and “Menu” options, which i have made hidden using css.

Any hint to achieve this? Can we customize the font style of the menu items? Which css class i can modify?

.rc-overflow {
display: flex;
justify-content: flex-end;
}

st_navbar
st_navbar1918×263 18.3 KB

I can see modifying this CSS removes the extra spaces and moves the menu to the right but since this class doesn’t looks static, can you help to identify the correct approach?

st_navbar_2
st_navbar_21904×688 98.7 KB

4

Hi @blackary

Appreciate any input on this.

5

This should do what you’re looking for

.stAppHeader span, svg {
    color: white !important;
}

.rc-overflow {
    display: flex;
    justify-content: flex-end;
    margin-right: -7rem;
}

But, mostly you’ll just need to fiddle with things if you really want to customize the look. In general, my recommendation is to keep style-changes via CSS to a minimum when working with streamlit. There are a number of basic things you can change through config.toml Theming - Streamlit Docs, but otherwise it can get very complex if you have a very specific view of how things should look.