How to hide a header in a template

Hello! I am creating a dashboard using a VanillaTemplate and have been enjoying all the out-of-the-box features a lot!

There is one modification that I would like to apply to it but I am not sure how to do it.
I would like to remove the header bar since in my case it’s not useful and only occupies space.

How can I do it? It seems there is no flag to disable it from Python? I tried copying the whole code of VanillaTemplate and modifying the html file. Unfortunately, when I remove the <nav> part the dashboard fails. It seems it’s trying to update the busy indicator and it can’t find it. Ultimately, I would prefer not to modify the html file but just use the template from the library.

Is there some special method to it?

On a first guess, I would say there is no python-side things you can do.
You’ll need to modify the CSS of this element certainly (e.g. setting a height of 0) and perhaps you’ll need to look for a solution online.

Ahh ok, I hoped there is some less hacky way.

Indeed, this code does the trick

import panel as pn

CSS = """
#header {
    height: 0;
    padding: 0;
}

.pn-busy-container {
    visibility: hidden;
}
"""

pn.extension(raw_css=[CSS])

Thanks for the help!

2 Likes