Update app.py

app.py

@@ -1,99 +1,75 @@
 import streamlit as st
 
-# Fix the CSS to avoid parsing errors
-custom_css = """
-<style>
-div.block-container {
-    padding-top: 1rem;
-}
-
-div[data-testid="stDecoratedAppViewContainer"] > div:first-child {
-    position: sticky !important;
-    top: 0 !important;
-    background-color: white;
-    z-index: 999;
-    padding: 0px !important;
-}
-
-.custom-header {
-    background-color: #90EE90;
-    padding: 1rem;
-    border-bottom: 1px solid #ddd;
-    width: 100%;
-}
-
-header[data-testid="stHeader"] {
-    display: none;
-}
+# Alternative approach: Use Streamlit's native components with minimal CSS
 
-section[data-testid="stSidebar"] {
-    z-index: 0;
-}
+# First, let's hide the default header with minimal CSS
+st.markdown("""
+<style>
+header {display: none !important;}
 </style>
-"""
+""", unsafe_allow_html=True)
+
+# Now create a completely custom header using Streamlit elements
 
-# Apply the CSS with proper escaping
-st.markdown(custom_css, unsafe_allow_html=True)
+# Create a container at the top of the app
+header = st.container()
 
-# Create a custom header at the very top (this is key)
-# This must be the very first Streamlit element
-with st.container():
-    st.markdown('<div class="custom-header">', unsafe_allow_html=True)
-    col1, col2 = st.columns([1, 9])
-    
-    with col1:
-        # Add logo
-        try:
-            st.image("images/menu_book_60dp_75FBFD.png", width=60)
-        except:
-            st.write("📚")  # Fallback emoji if image doesn't load
-            
-    with col2:
-        st.markdown("""
-        <h2 style="margin: 0; padding: 0;">Map descriptions to SBS codes with Sentence Transformer + Reasoning</h2>
-        <p style="margin: 0; padding: 0;">Select specific Chapter for quicker results</p>
-        """, unsafe_allow_html=True)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+# Use the container for the header
+with header:
+    # Apply background color with markdown
+    st.markdown(
+        """
+        <div style="
+            background-color: #90EE90; 
+            padding: 10px; 
+            margin-bottom: 10px; 
+            border-bottom: 1px solid #ddd;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 9999;
+            width: 100%;
+        ">
+            <div style="display: flex; align-items: center;">
+                <div style="flex: 0 0 60px;">
+                    <img src="https://raw.githubusercontent.com/streamlit/streamlit/master/lib/streamlit/static/favicon.png" width="50" 
+                    alt="Logo" style="vertical-align: middle;">
+                </div>
+                <div style="flex-grow: 1;">
+                    <h2 style="margin: 0; padding: 0;">Map descriptions to SBS codes with Sentence Transformer + Reasoning</h2>
+                    <p style="margin: 0; padding: 0;">Select specific Chapter for quicker results</p>
+                </div>
+            </div>
+        </div>
+        """, 
+        unsafe_allow_html=True
+    )
 
-# Add a bit of spacing
-st.write("")
+# Add spacing to prevent content from being hidden under the fixed header
+st.markdown(
+    """
+    <div style="height: 100px;"></div>
+    """, 
+    unsafe_allow_html=True
+)
 
-# Sidebar content (similar to your original code)
+# Rest of the app
+# Sidebar content
 st.sidebar.header("SBS V2.0 mapper")
 st.sidebar.write("(work in progress)")
 st.sidebar.text("Demo by JA-RAD")
+st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
+st.subheader("Select specific Chapter for quicker results")
+st.logo(image="images/menu_book_60dp_75FBFD.png")
 
-# Page setup
-type_text_page = st.Page(
-    page="pages/type_text.py",
-    title="DEMO (work in progress)",
-    icon=":material/keyboard:",
-    default=True,)
-
-# Navigation
-pg = st.navigation(pages=[type_text_page])
-pg.run()
-
-# Inject CSS and JS as early as possible in your app
-st.markdown(custom_css, unsafe_allow_html=True)
-st.markdown(js_fix, unsafe_allow_html=True)
-
-# --- PAGE SETUP ---
+# Page setup - moved after the custom header
 type_text_page = st.Page(
     page="pages/type_text.py",
     title="DEMO (work in progress)",
     icon=":material/keyboard:",
     default=True,)
 
-# --- Your Streamlit App ---
-st.title("Map descriptions to SBS codes with Sentence Transformer + Reasoning")
-st.subheader("Select specific Chapter for quicker results")
-st.logo(image="images/menu_book_60dp_75FBFD.png")
-st.sidebar.header("SBS V2.0 mapper")
-st.sidebar.write("(work in progress)")
-st.sidebar.text("Demo by JA-RAD")
-
 # --- NAVIGATION SETUP ---
 pg = st.navigation(pages=[type_text_page]) # WITHOUT SECTIONS
 pg.run()