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 navigation bar #16

Open
djhoese opened this issue Jun 1, 2020 · 4 comments
Open

Add navigation bar #16

djhoese opened this issue Jun 1, 2020 · 4 comments

Comments

@djhoese
Copy link
Member

djhoese commented Jun 1, 2020

I think this page was originally designed as a single page of pytroll related information. However, we've now grown the site to include other pages (logos, workshops, etc). These pages are sometimes hard to find because there is no navigation bar on the side or top of the page to these other pages; only links at the bottom.

I propose we find a new theme or update the existing one to include a navigation bar somewhere. Might give us a chance to remove some of the extra text at the top of the page that I think we didn't want (View on GitHub, the double Pytroll page title, etc).

@gerritholl
Copy link
Contributor

There already seems to be a bar at the top that says Pytroll | Software | Community | Gallery | Code of Conduct, but for navigation it would be more user-friendly if it were static, so it did not scroll with the rest of the page.

@djhoese
Copy link
Member Author

djhoese commented Feb 5, 2024

I think after this issue was created I switched to a new Jekyll theme. So Jekyll being the static site generation tool/software and we're using a "minima" based theme, specifically the "dark" skin (from what I see in _config.yml). Finding a way to make the navigation static and stay at the top of the window would require:

  1. Finding an existing recipe compatible with the minima theme.
  2. Custom javascript or whatever else is required to make that work.

@djhoese
Copy link
Member Author

djhoese commented Feb 5, 2024

Ok I played around and turns out changing the CSS for .site-header with position: fixed, width: 100%, and background-color: #181818 gets you like 95% of the way there. The last thing is that the top of the page needs to be offset by the size of the header/navigation bar as right now the Pytroll logo image (the top of the page) shows up underneath the navigation bar.

I don't have any more time to play with this, but if someone is bored go for it.

@djhoese
Copy link
Member Author

djhoese commented Feb 5, 2024

I lied. Changing .page-content CSS padding to padding: 100px 0 gives it enough space that it just works.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants