My project uses a sticky header.
Unfortunately, when I follow a link to a subhead in a topic, the target
heading is obscured by the sticky header.
The CSS for my header follows:
header {
top: 0;
position: -webkit-sticky;
position: sticky !important;
position: 0 !important;
background: #24292e;
padding: 2rem 0;
z-index:1;
}
header .container {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
align-items: center;
}
header .site-nav-toggle {
color: #f5f6f7;
font-size: 3.5rem;
margin-left: -1rem;
padding: .5rem 1rem .5rem 0;
cursor: pointer;
}
header .site-title {
color: white;
font-size: 2rem;
font-weight: 400;
}
...and I've tried adding the following to my CSS with no luck:
Attempt 1
section[id] {
@media (min-height: 32px) {
scroll-margin-top: 100px; // 1
}
}
Attempt 2
div[id] {
@media (min-height: 32px) {
scroll-margin-top: 100px; // 1
}
}
Attempt 3
scroll-padding-top: 100px;
None of those additions has made a difference; the target heading is still
displayed behind the sticky header.
Has anyone else had any success with this?
Thank you in advance.
--
You received this message because you are subscribed to the Google Groups
"sphinx-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to sphinx-users+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/sphinx-users/ee1ca2c6-b26d-4150-b671-3446a20a68d5n%40googlegroups.com.
