How do i hide/ remove the menu in production?

Using Streamlit
1

Hi

I would like to be able to remove the menu bar when shipping to production. Is that possible?

image

I would think it natural to remove. The user does not need to understand that this is a Streamlit app as far as I can see. Maybe they would still need to be able to recalculate? Or clear the cache? But so far I only see the use case for that in development.

Thanks

6 Likes
2

Or even better. At some stage someone would ask for a menu for navigation. Could the existing menu be extended to that so that

  1. I as a developer i could configure which of the existing items to enable and disable.
  2. Add my own items that if clicked would trigger an update
  3. enable a tree structure of subitems of items.
  4. choose between the existing minimized layout or a maximized, expanded top menubar layout

?

2 Likes
3

so far I only see the use case for that in development.

I agree. We’ve been thinking about how to solve that one lately. One idea is: when developing a Streamlit app you’d use streamlit run myname.py as usual, but when serving it to users you’d use streamlit serve myname.py.

The latter would start the app normally except:

  1. The hamburger menu have fewer items (or maybe it wouldn’t be there at all, as you propose)
  2. Streamlit would not watch your filesystem for changes
  3. Probably some other stuff :smiley:

I started a feature request to track this here: Ability to hide the hamburger menu · Issue #395 · streamlit/streamlit · GitHub

5 Likes
4

And also this one: https://github.com/streamlit/streamlit/issues/396

3 Likes
5

Has there been a solution for removing this yet?

3 Likes
6

Hey @zacheism :wave:, this is a functionality that we’re still building out and we don’t yet have a set timeline for when it will be available. I’d definitely recommend following, upvoting, and/or commenting on the enhancement though! We’d :heart: to get your input on it, especially while it’s still in the development phase. We’re always looking for feedback from the community about workflows and how Streamlit is being used in those workflows.

4 Likes
7

Sounds good! I don’t really have much to add to the issue, just that this menu doesn’t really serve any purpose to the user, so there’s no reason the user should see it. I like the production / development mode idea though as it is helpful for clearing the cache / rerunning. But having two menus (the side bar and the hamburger), in my opinion, is just confusing and somewhat odd from a UI/UX perspective. But then again, I much prefer minimalistic design (which you guys otherwise nail) so this could just be my opinion.

3 Likes
8

I upvoted the Github issue to remove the hamburger menu. It’s a non starter. I won’t use streamlit to deploy apps to non-technical content consumers without being able to hide that menu – it’s just too confusing.

3 Likes
9

hide_streamlit_style = “”"

#MainMenu {visibility: hidden;}
footer {visibility: hidden;}

“”"
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

try this

8 Likes
10

@Mani Your answer is partially correct. I just tried it but need to add the style tags.

hide_streamlit_style = """
<style>
#MainMenu {visibility: hidden;}
footer {visibility: hidden;}
</style>

"""
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

This will hide the hamburger menu completely.

25 Likes
11

Thanks @Mani, it works great. But I think it is a little insecure. For just some seconds the menu is showed. I clicked on it during this short time and could get access to the source.

I vote +1 with @Marc initial post and Thiago suggestion.

4 Likes
12

It will be better if we can customize the hamburger menu and options within it.
also I have read another topic, but the issue is still open.
is there any newer updates?

2 Likes
13

Anybody has any idea how to remove the padding top of the starting page.
There is a lot of unnecessary white space left at the top.

Inspecting the layout, there is a padding attribute of the .css-1y0tads class. If ones removes it, it somehow does what I need.

However, I am not sure where to insert inside my code, as I guess these are defaults .css attributes.

Any ideas??

14

Hi @oltipreka,

On Streamlit, version 0.85.0, I included the following to set the top padding to 0:

hide_streamlit_style = """
<style>
.css-hi6a2p {padding-top: 0rem;}
</style>

"""
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

Here’s an app that’s hopefully reproducible on your end:

import streamlit as st

hide_streamlit_style = """
<style>
.css-hi6a2p {padding-top: 0rem;}
</style>

"""
st.title("Test")
if st.checkbox('Remove padding'):
    st.markdown(hide_streamlit_style, unsafe_allow_html=True)

remove-padding

Happy Streamlit’ing! :balloon:
Snehan

3 Likes
15

Wonderful stuff! Thank you!

However the .CSS attribute you have indicated doesn’t work for me.
Whereas, if I include in the CSS file

.css-1y0tads {padding-top: 0rem;}

It works perfectly.
Perhaps others may encounter the same issue.

2 Likes
16

Hi,

I would like to know how streamlit manages to show the pop-up window while clicking on the settings option in the hamburger menu. Specifically,
image

Its observable that, this pop-up window contains a drop-down list and some check boxes. Also, the rest of the page is dimmed when the pop-up window appears.
I can really use this functionality to show pop up information or even add some streamlit components in the pop up window such as buttons and drop down box.

17

This helps, thanks!

18

Owesome, thanks for the solution worked like a charm

19

perhaps add header {visibility: hidden;display:none}. for all elements ‘display:none’ is css3 specification compliance for hide

20

use css selector to hide.When streamlit update,the css selector may change.

st.markdown('''
<style>
.stApp [data-testid="stToolbar"]{
    display:none;
}
</style>
''', unsafe_allow_html=True)
3 Likes