The Navigation bar I'm trying to add to my streamlit app is blurred

Using Streamlit
#1

Hello! I’ve been using Streamlit for a few projects and have been having great results, and so I wanted to create a template for my organization so that we can develop our dashboards in a homogeneous way.

I’ve been using a template developed by one of my colleagues and he implements the following code for a Navigation Bar (NavBar) that always appears to be blurred. Can somebody help me remove it? There is a picture attached for reference.

strategic_analysis_blurred
strategic_analysis_blurred1220×752 46 KB

Here is the code he uses to create the navigation bar. To deploy it I simply run this two extra commands in my code:
NavBar = NavBar()
NavBar.create_nav_bar()

## NavBar code:
style = """
.navbar .navbar-brand{
    margin-left:20px !important;
    }
    """

buttons = {
    "names": ["GitHub", "Confluence", "Jira"],
    "links": [
        "COMPANY_GITHUB_PROFILE",
        "COMPANY_CONFLUENCE_PAGE",
        "JIRA_TICKET_LINK"

    ]
}
side_bar = """
  <style>
    /* The whole sidebar */
    .css-1lcbmhc.e1fqkh3o0{
      margin-top: 3.8rem;
    }
     
     /* The display arrow */
    .css-sg054d.e1fqkh3o3 {
      margin-top: 5rem;
      }
  </style> 
  """
import streamlit as st

class NavBar():

    def __init__(self, style = style, buttons = buttons, side_bar = side_bar):

        self.style = style
        self.buttons = buttons
        self.side_bar = side_bar

    def create_nav_bar(self):

        buttons_html = ""
        for name, link in zip(self.buttons["names"], self.buttons["links"]):
            buttons_html += f"""<li class="nav-item">
                    <a class="nav-link" href="{link}" target="_blank">{name}</a>
                </li>"""
        nav_bar_html = f"""<style>
        {self.style}
    </style>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="LINK_TO_COMPANY_PAGE" target="_blank" style="margin-left:15px!important;">
        <img alt="Qries" src="IMG_LINK"
                width="270" height="40">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            {buttons_html}
            </ul>
        </div>
    </nav>
"""

        st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
        st.markdown(nav_bar_html, unsafe_allow_html=True)
        st.markdown(self.side_bar, unsafe_allow_html=True)

Does anyone know why I’m seeing the image as in the picture attached? I don’t want it to be blurred. I have already tried writing the code for creating the NavBar at the end of the app script.

#2

I believe it’s because of the new feature at the top of the app that makes content that goes behind it look blurred; seems like a design decision to make scrolling through long pages look more natural?

image
image1367×161 17.3 KB

Can anyone from the Streamlit team possibly advise? Personally, as well as having the issue above, I find that this new feature sometimes makes long pages feel quite weird when scrolling. Thanks!

#3

Hi @rjh124 , thanks for the response!

I was able to solve it by downgrading the streamlit version in my container to streamlit == 1.7.0 and the version of the click module to click == 7.1.2. But this isn’t scalable as I might need the newer version of streamlit in the future. Let me know if this helps you in the meantime!

If someone from streamlit has another solution, please let me know!

#4

Yeah, I used the same solution, which isn’t great. Would be great to hear if something can be done about this - injecting CSS hasn’t quite worked so far for me, mainly because the “blur bar” appears above everything else and I’m not sure how to set it to hide behind additional elements.

I also can’t find the log of that particular enhancement in the release notes, but this seems like a fairly notable change to the CSS of the core app design elements.

#5

Hi @rjh124 and @dark_mike20 :wave:

You can use a CSS hack to set the background color of the header from white to transparent or none, by including the following snippet in your app:

st.markdown(
"""
<style>
header[data-testid="stHeader"] {
    background: none;
}
</style>
""",
    unsafe_allow_html=True,
)

hide-header

Happy Streamlit-ing! :balloon:
Snehan

1 Like
#6

Hi there @snehankekre ,

I’m having a related issue when trying to hide the header. Do you know if this thin white line can be hidden too? Thanks in advance.