Dashboard Header

Is it possible to hide the header with the dashboard name and hubitat logo?

Yes, you can do this with custom CSS code. Though I'm on the road, so I can't give you an example at the moment.

2 Likes

Frits, any chance you’ve had a chance to find that css?

The header will go away if you paste this into the CSS settings under advanced
Just as a warning upfront: You won't be able to get back into the settings of that dashboard unless you know how to reverse this setting via the "element inspector", so be careful!

.header {
display: none;
}

You can also just hide the name and the logo but keep the 3 right icons (connection, add, settings) by using this CSS code instead:

.dashBack {
display: none;
}
.dashName {
display: none;
}
1 Like

OK so took your warning on board, but for the life of me I can't find the line of code in the element inspector to undo it, can you point me in the right direction

Probably best to make it very subtle, I added this to my latest dashboard... (ignore my use of a dark mode extension messing with the colours on my mode bar :slight_smile: )... I think this covers everything.... Will try and find the reference I used here as my source for making this change... I'm sure it is somewhere in the Noobs CSS thread....

.dashboard div .header {
position: fixed;
top: 0;
right: 1em;
z-index: 999;
opacity: .2;
zoom: .6;
-moz-transform:scale(.6);
}

.wrapper {
    height: 100%;
    margin-top: 0;
    padding-top: 1em;
}

.dashBack,
.dashName {
    display: none;
}

.dashboard div .header>.flex-auto.justify-end,
.dashboard div .header>.flex-auto.justify-end>.flex {
    display: block;
}

I'm trying to search in the element inspector to find the css for it to undo it but can't find the Wright section

I can't comment on where you removed the icons, but I added the code I posted in the custom CSS section

could you give me a direction where to start?

its ok eventual found it

Download the Hubitat app