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

[michalc]

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

[Charly_Wargnier]

Hi @michalc, welcome to the Streamlit community!

Would Streamlit_navbar from Chanin suit your needs?

• GH: https://github.com/dataprofessor/streamlit_navbar
• Demo is deployed here: https://share.streamlit.io/dataprofessor/streamlit_navbar/main/app_navbar.py
• Chanin has also done a thorough tutorial, walking you through the navbar set-up:

Is it Possible to Add a Navigation Bar to Streamlit Apps? | Streamlit #29

Best,
Charly

[michalc]

@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…

[SST89]

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:

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?

[Ahmad]

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

[Kiran_K]

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