Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
seancolsen opened this issue Mar 10, 2017 · 3 comments
Closed

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

seancolsen opened this issue Mar 10, 2017 · 3 comments
Assignees
Milestone

Comments

@seancolsen
Copy link

@seancolsen seancolsen commented Mar 10, 2017

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.)

@seancolsen seancolsen changed the title How to get a non-fixed head How to get a non-fixed header Mar 10, 2017
@squidfunk
Copy link
Owner

@squidfunk 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 How to get a non-fixed header Add support for non-fixed (static) header Mar 11, 2017
@squidfunk
Copy link
Owner

@squidfunk 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
Copy link
Owner

@squidfunk squidfunk commented Mar 11, 2017

1.3.0 was just released.

@squidfunk squidfunk closed this Mar 11, 2017
seancolsen added a commit to seancolsen/civicrm-docs that referenced this issue Mar 13, 2017
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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.