Custom Component build: How come CSS styling not working?

Custom Components
1

I’ve created a horizontal menu bar component that works sufficiently in my local testing. It uses the following styling for the outermost div:

<div style={{ 
      width: "100%", 
      display: "flex", 
      justifyContent: "center", 
      alignItems: "center", 
      backgroundColor: "rgba(211, 211, 211, 0.03)", 
    }}>

I would like to pin this component to the bottom of the viewable area (think X.com on mobile) so that when I scroll the menu bar is constantly displayed and fixed at the bottom. The AI suggested the following styling modifications:

<div style={{ 
      position: "fixed", // Fixed position
      bottom: 0, // Align to the bottom
      left: 0, // Align to the left
      width: "100%", 
      display: "flex", 
      justifyContent: "center", 
      alignItems: "center", 
      backgroundColor: "rgba(211, 211, 211, 0.03)", 
    }}>

This solution does not work, however, with my python testing app (which just has a title and calls the component).

My best guess is that it has to do with the way the component is being wrapped by Streamlit in an iframe and that this functionality is not possible. However, I would prefer to hear a different answer. All suggestions and feedback are appreciated. Below is a screenshot of the browser’s inspect, where the div resides directly beneath the title (however, no menu elements are visible).

image
image769×808 14.6 KB

EDIT:

I will look into this already created component and see if I can’t modify it to suit my needs: New Component: Streamlit Navigation Bar | Based on my initial review, the functionality I’m intending does seem possible, but more than a couple lines of CSS may be required.