Static Nav Bar

Hey guys!

There was an old thread in the forums about a static nav bar but the sizing was off. I just made a quick css edit from scratch to fix it and the style is below:

#top {
position: fixed;
width: 100%;
z-index: 10;
background-color: black
}
main {
position: relative;
top: 60px;
}

You can change the color, I just have it as black because I am using dark theme.

Hey guys, there is an issue with this code when somebody PMs you an imbedded game. The board, controls, and tools divs get shifted down 60px and get put into an overspill box. I can't find a solution, any ideas?

Stylus has an option about iframe, exposing them. on or off, does not change the problem with the CSS code here.
but on, somehow, there is syntax to target the iframe. so perhaps by writing a version for the iframe in the script, might fix this.

see this link:

https://github.com/openstyles/stylus/wiki/Options#expose-iframes-via-htmlstylus-iframe

if in your script you add a neutral main style (perhaps look at what it is before your mod). I may try myself. not sure.

@ChesswurmOTB
@BerserkAsIfUWereMad

Tested solution using Stylus (advanced option exposing iframes need to be toggled on)

#top {
position: fixed;
width: 100%;
z-index: 10;
background-color: black
}
html:not([stylus-iframe$="lichess.org"]) main {
position: relative;
top: 60px;
}

Only the "main" selector was changed to exclude the potential targets in the html inside the iframe,
using the Stylus injected prefix, html[stylus-iframe$="lichess.org"]
and the excluding CSS property :not(single selector)

e.g. html[stylus-iframe$="lichess.org"] main { display: none }, will only leave the header inside iframe.