Custom header right at the top of the page, styled with custom CSS

Custom Components
,
1

I would like to have a Streamlit app, but with a custom header bar right at the very top, styled with custom CSS (and maybe even using a bit of Javascript)

Is this possible? If so, how?

I see lots of things about how to make custom components. But I’ve not found anything about bits that wrap the components. There is some information about themes, but I’ve not found out how to use them to control the HTML

1 Like
2

Hi @michalc, welcome to the Streamlit community! :balloon:

Would Streamlit_navbar from Chanin suit your needs?

Best,
Charly

3

@Charly_Wargnier I think it’s certainly a good start! It looks like it doesn’t quite push down the content of Streamlit though, and instead puts the header over the top of everything? Will investigate…

1 Like
4

Hi @michalc !

I am still wrestling with building an image-banner at the top of my streamlit-app, even though I have browsed tons of articles and watched the linked video. Still, I am not successful at getting the image hovering on the top of the page like a banner.

# Function for loading css stylesheet
def local_css(file_name):
   with open(file_name) as f:
         st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
local_css('style.css')

# Get the html-content of the .html-file
html_doc=codecs.open('index.html', 'r', 'utf-8').read()

# Parse the html file
soup = BeautifulSoup(html_doc, 'html.parser')

# Format the parsed html file
html_string2 = soup.prettify()

st.markdown(html_string2, unsafe_allow_html=True)

The ‘index.html’ file looks something like this:

index.html

While the associated css-file has a very simple and easy content as follows:

.banner {
    width: 100%;
    display: block;
}

.banner > .banner-image {
    width: 100%;
    display: block;
}

The final output looks like this. It seems as something is wrong with my html-code.
The sidebar-image gets loaded, but not the banner header-image… Why? Do you think you could help me with it and give some hints?

streamlit_app_error_result
streamlit_app_error_result1847×821 77.6 KB

5

If html can’t do the image banner,css might do the job.

6

I’m not sure if you are looking for this. But we can create a horizontal navigation bar at the top of the page using ‘streamlit_option_menu’

from streamlit_option_menu import option_menu
from streamlit_extras.switch_page_button import switch_page

def navigation_bar():
    with st.container():
        selected = option_menu(
            menu_title=None,
            options=["Home", "Upload", "Analytics", 'Settings', 'Contact'],
            icons=['house', 'cloud-upload', "graph-up-arrow", 'gear', 'phone'],
            menu_icon="cast",
            orientation="horizontal",
            styles={
                "nav-link": {
                    "text-align": "left",
                    "--hover-color": "#eee",
                }
            }
        )
        if selected == "Analytics":
            switch_page("Analytics")
        if selected == "Contact":
            switch_page("Contact")

You can create something like this

image
image1772×248 17.6 KB

1 Like
7

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.