Add support for non-fixed (static) header #205

Closed
seanmadsen opened this Issue Mar 10, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@seanmadsen

I'm customizing Material with some additional CSS and one of my goals is to change the site header (blue bar at the top) to be non-fixed — that is, I'd like it to move up (and out of view) when I scroll the page.

The following CSS gets me most of the way there:

header.md-header {
  position: static;
}

.md-main__inner {
  margin-top: 0;
}

But the perfectionist in me isn't satisfied with the extra vertical space that remains above the primary and secondary sidebars after scrolling. Is there an easy way I can get those sidebars to continue moving up just a bit more, after the header has been scrolled up?

In case you're curious: here's why I want to change the header positioning... I'm using Material for a site with several dozen books, and I'd like to add an additional header above the standard header which will allow users to navigate between the various books and see which book they're on. With this additional content in the header, I think it would be a hog of vertical space to keep it fixed. (But I will say: I do like the design choice to keep it fixed by default, it just doesn't suit my custom needs perfectly.)

@seanmadsen seanmadsen changed the title from How to get a non-fixed head to How to get a non-fixed header Mar 10, 2017

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Mar 11, 2017

Owner

Good point. I've some refactoring in the pipeline that will make this very easy. Will keep this issue updated with notes on this topic.

Owner

squidfunk commented Mar 11, 2017

Good point. I've some refactoring in the pipeline that will make this very easy. Will keep this issue updated with notes on this topic.

@squidfunk squidfunk added this to the 1.3.0 milestone Mar 11, 2017

@squidfunk squidfunk self-assigned this Mar 11, 2017

@squidfunk squidfunk changed the title from How to get a non-fixed header to Add support for non-fixed (static) header Mar 11, 2017

@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Mar 11, 2017

Owner

Fixed in master, will be released with 1.3.0. The following extra_css is necessary:

.md-container,
.md-main__inner {
  padding-top: 0;
}

.md-header {
  position: static;
}

.md-sidebar[data-md-state=lock] {
  top: 0;
}
Owner

squidfunk commented Mar 11, 2017

Fixed in master, will be released with 1.3.0. The following extra_css is necessary:

.md-container,
.md-main__inner {
  padding-top: 0;
}

.md-header {
  position: static;
}

.md-sidebar[data-md-state=lock] {
  top: 0;
}
@squidfunk

This comment has been minimized.

Show comment
Hide comment
@squidfunk

squidfunk Mar 11, 2017

Owner

1.3.0 was just released.

Owner

squidfunk commented Mar 11, 2017

1.3.0 was just released.

@squidfunk squidfunk closed this Mar 11, 2017

seanmadsen added a commit to seanmadsen/civicrm-docs that referenced this issue Mar 13, 2017

material cust - sidebar improvements
Material 1.3.0 was just released with an additional feature to
improve the result when custom-setting the site header to be
non-fixed. This commit implements the necessary changes to take
advantage of this improvement.
Ref: squidfunk/mkdocs-material#205
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment