Round borders for the option_menu component / change color of title's icon or hide it

Using Streamlit
, ,
1

Hello,

I want to have round borders in my option_menu() component. Any idea how to do this? This is as far as I’ve been able to get, I can see the round border but the color of whatever is behind the option_menu() component is white by default and ideally it should be blue like the rest of the sidebar:

BONUS help: Can I change the color of the title’s icon to say, white, so it doesn’t show?

image
image506×541 10.9 KB

Here the code:

 # Create a sidebar with options
    with st.sidebar:
        menu = option_menu(
            menu_title="This is the title",
            menu_icon="bi-box",
            options=[
                "Business",
                "Model",
                "Optimization",
                "Media simulator",
                "Business forecast",
            ],
            icons=[
                "briefcase",
                "cpu",
                "bar-chart",
                "sliders",
                "graph-up-arrow",
            ],
            default_index=0,
            orientation="vertical",
            styles={
                "container": {
                    "padding": "10px 0px", 
                    "background-color": "#ffffff",
                    "margin": "0px auto",  
                    "border": "1px solid #000000",
                    "border-radius": "20px", 
                },
                "icon": {
                    "color": "#0069b4",  
                    "font-size": "16px"
                },
                "nav-link": {
                    "font-size": "16px", 
                    "text-align": "left", 
                    "margin": "10px", 
                    "--hover-color": "#B3D3F0"
                },
                "nav-link-selected": {
                    "background-color": "#0069b4", 
                    "font-size": "16px",
                },
            }
        )

I’ve tried all kinds of things, including using stylable containers, markdown, inspecting different divs, etc… no luck…

Hopefully someone has a solution…

Thank you!

2

Hello,
I don’t have any problem with your code. What version of streamlit/option_menu are you ?
image

for the bonus, to not display the icon :

menu_icon=" ",
3

Wow! that’s exactly how I want it it to look (sans the black border which I added to see what was going on with the round corners!)… I checked the versions of streamlit and streamlit-option-menu and had to update only the latter, which I think I might have been missing an update or two… yet it still looks the same… can you tell me what other libraries you included and your Python version? I am running 3.11.5…

4

I can send you my computer :smiley:

I’am running with 3.9.
Do you have any other CSS code ? I used to have the same problem for another widget (fews month ago), and i thing it was the background css code i’d changed or another modification.

5

I am manipulating the CSS quite a bit for this dashboard… I will test in a separate file, add things incrementally and see how it looks first just by itself… I’ll reply with my findings! Thanks!

1 Like
6

Well, it was indeed caused by something that I had done months ago inside the style.css file I created… I was now getting another look at this after several months to see if I could make the corners round cause it really bothers me, but while doing this, I encountered an old foe, the secondary background color in the config.toml file changes the background of the filters as well as the sidebar, which really sucks… if you want a dark sidebar, like the darker blue I am using, then the filters look horrible… I suppose there is no easy way to change the color of the background of the filters, right? just more markdown applied to each filter, maybe create a function to handle this, etc… a bit of a pain for such a basic formatting need… do you have any suggestions how to go about this?

7

At least you found it ! I have not too much idea, it look like a lot of work for not a lot of gain :smiley:
Suggestion : stay with some ‘basic’ grey/ light blue will be much readable for the user (And easy fix for you !)

8

The company color is that blue, but I actually did what you said here, I picked a light grey that is part of their brand colors and changed it, so now I have round corners and a light colored sidebar (and filters) and now the sidebar matches another image that is also in the sidebar, which has the round corners, which was the culprit of me looking for ways to have the same formatting with the rest of the widgets in the dashboard… any way, long answer, but thanks for the help… let’s see if the boss likes it with grey instead of blue…

1 Like