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

How to keep navigation bar at the top when scrolling? #678

Open
crichardson332 opened this issue May 31, 2021 · 1 comment
Open

How to keep navigation bar at the top when scrolling? #678

crichardson332 opened this issue May 31, 2021 · 1 comment
Labels
enhancement An enhancement.
Milestone

Comments

@crichardson332
Copy link

I'd like to have the navigation bar at the top stay there while scrolling, so the nav buttons are always visible on the screen. But I'm not sure where this layout would be controlled.

@adimail
Copy link

adimail commented Nov 12, 2023

To make the fixed navbar, you can edit the div class .masthead

.masthead in _masthead.scss

- position: relative;
+position: fixed; /* Change to fixed */
+top: 0; /* Stick to the top of the page */
+width: 100%; /* Take the full width of the viewport */
+background-color: #fff; /* Set a background color if needed */
  top: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #f2f3f3;
  -webkit-animation: intro 0.3s both;
  animation: intro 0.3s both;
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  z-index: 20;
  height: 3em;

+ border-bottom: 1px solid $border-color;

Also add top margin to body in _base.scss

+  margin-top: 3em;

@rjzupkoii rjzupkoii added the enhancement An enhancement. label Feb 14, 2024
@rjzupkoii rjzupkoii added this to the v0.9 milestone Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement An enhancement.
Projects
None yet
Development

No branches or pull requests

3 participants