app.py

import streamlit as st

# Remove any previous custom CSS styles
# Create a custom sticky header using Streamlit components

# Custom CSS only for basic styling, not position control
st.markdown("""
<style>
    /* Basic styling for our custom header */
    .custom-sticky-header {
        background-color: #90EE90;
        padding: 10px 15px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
    }
    
    /* Hide the default Streamlit header */
    [data-testid="stHeader"] {
        visibility: hidden;
        height: 0;
    }
    
    /* Ensure our custom header stays at the top */
    [data-testid="stVerticalBlock"] > div:first-child {
        position: sticky !important;
        top: 0 !important;
        background-color: white !important;
        z-index: 999 !important;
    }
</style>
""", unsafe_allow_html=True)

# Create a placeholder for the sticky header at the very top of the app
# This has to be the first element in your app
header_container = st.container()

# Use the container to create a custom header
with header_container:
    st.markdown("""
    <div class="custom-sticky-header">
        <h1>Map descriptions to SBS codes with Sentence Transformer + Reasoning</h1>
        <h3>Select specific Chapter for quicker results</h3>
    </div>
    """, unsafe_allow_html=True)
    
    # Add the image directly in the header
    try:
        st.image("images/menu_book_60dp_75FBFD.png", width=100)
    except:
        # In case the image path doesn't work
        st.write("Logo image")

# Add a small spacer
st.write("")

# Rest of your app works as normal
st.sidebar.header("SBS V2.0 mapper")
st.sidebar.write("(work in progress)")
st.sidebar.text("Demo by JA-RAD")

# Your page setup and navigation
type_text_page = st.Page(
    page="pages/type_text.py",
    title="DEMO (work in progress)",
    icon=":material/keyboard:",
    default=True,)

pg = st.navigation(pages=[type_text_page])
pg.run()