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

When scrolling down the navbar at top hides automatically reopened #215

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Aashutoshbro
Copy link

Issue #200
When scrolling down the navbar at the top should hide automatically

Copy link

netlify bot commented Apr 28, 2024

Deploy Preview for startling-capybara-2231ea ready!

Name Link
🔨 Latest commit 461e12f
🔍 Latest deploy log https://app.netlify.com/sites/startling-capybara-2231ea/deploys/662e372363b6ed0008acd6f2
😎 Deploy Preview https://deploy-preview-215--startling-capybara-2231ea.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@pavlenex
Copy link
Collaborator

pavlenex commented May 2, 2024

Hey @Aashutoshbro thanks for the PR, what do you think of the menu appearing on the scroll up? It's important imo that we keep the call to actions to important things to the website. Would you be able to add that?

@Aashutoshbro
Copy link
Author

@pavlenex It would be great if you could tell me which one (CTA) to include as per the PR, I just made some property change to meet the issue.

@pavlenex
Copy link
Collaborator

pavlenex commented May 2, 2024

@Aashutoshbro entire navbar? check this for context #200 (comment)

@Aashutoshbro
Copy link
Author

So it's not actually about making nav hide exactly on scroll up, I guess,
It's about making CTA more clear to take action for ease

"I mean yeah, that's the point of the sticky navbar, it's not a bug. It's there so it highlights call to actions clearly."- @pavlenex

@pavlenex
Copy link
Collaborator

pavlenex commented May 2, 2024

@Aashutoshbro Hide nav bar on scroll down and show it on scroll up, is that possible?

@Aashutoshbro
Copy link
Author

So it's like enhancement to navbar for clear sticky navbar function

can you tell me more about what exactly might me done to go with issue?

@Aashutoshbro
Copy link
Author

Can it be achieve with this, you can check this out : @pavlenex
src/.vuepress/theme/components/Navbar.vue

(Code line 8) Previous one:
hasScrolled ? 'bg-dark-200/90' : 'bg-none '

(Code line 8) Change to:
hasScrolled ? 'bg-dark-200/90 hidden' : 'bg-none '

@pavlenex
Copy link
Collaborator

pavlenex commented May 2, 2024

If you test these locally and they work, feel free to push them and then we'll have a live preview link build by netlify. Sorry ,not on my pc to test this.

@Aashutoshbro
Copy link
Author

Works if the above approach is applied: @pavlenex
https://deploy-preview-215--startling-capybara-2231ea.netlify.app/

@pavlenex
Copy link
Collaborator

pavlenex commented May 6, 2024

Hey @Aashutoshbro just tested https://deploy-preview-215--startling-capybara-2231ea.netlify.app and header is removed on scroll down, but doesn't re-appear on scroll up

@Aashutoshbro
Copy link
Author

Will try to sort that out

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

Successfully merging this pull request may close these issues.

None yet

2 participants