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.

Sign up for GitHub

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

Jump to bottom

Fixed top navigation bar in mobile #473

Open
umbe1987 opened this issue Oct 5, 2017 · 6 comments · May be fixed by #1125
Open

Fixed top navigation bar in mobile #473

umbe1987 opened this issue Oct 5, 2017 · 6 comments · May be fixed by #1125
Labels
Feature New feature Needed: design decision A core team decision is required Theme Option

Comments

@umbe1987
Copy link

umbe1987 commented Oct 5, 2017

Hi everybody,
I really like this theme. Would it be possible to always visualize the top menu bar on mobile even after scrolling down the page? I mean, the bar with the title and the three rows which you can tap to visualize the various chapters/sections.
Actually, if one needs it on mobile, and he's down the page very far from the top, he has to scroll all the way to the top to find it.
Is there an option to have it fixed?
Thanks in advance!
@umbe1987
Copy link
Author

Any thoughts on this?

I am working to improve this, but it's really hard due to my poor knowledge of the code/of programming in general.
I just found out from the developer window that the class controlling the aspect of the nav bar on mobile is called wy-nav-top. This has CSS property position:relative. Of course, changing this to position:fixed makes it always visible on top, but it shows up completely "ugly" (it's small and to the left, see image below).
I would be happy to contribute with a pull request, but I would need some help.

Thanks again!

immagine

@umbe1987 umbe1987 changed the title Fixed top menu bar in mobile Fixed top navigation bar in mobile Oct 19, 2017
@jessetan
Copy link
Contributor

Just did a quick test of this; would be doable by adding position:fixed; width:100%; top:0 to .wy-nav-top for mobile/tablet breakpoint and setting margin-top: $gutter / 4 + 50px on .wy-nav-content for same breakpoint.

Opinions on adding this option? @Blendify @davidfischer @agjohnson
I don't like things eating up my real estate on mobile but if it is a common request, we can do a theme option.

@jessetan jessetan added the Needed: design decision A core team decision is required label Jun 18, 2018
@umbe1987
Copy link
Author

Thank you so much, I tested your solution and it's exactly what I needed.
I don't think it takes much of the display, it's just a very small portion of it and most importantly, it's a must have if you want to navigate to another chapter easily. I would love to see it implemented, but meanwhile I can live with this implementation.
Again, thanks for solving this, really appreciate it!

@agjohnson agjohnson added Feature New feature and removed Feature request labels Sep 17, 2018
@umbe1987
Copy link
Author

Any news on this? I am actually using it and it's fine. The only real problem is that when I expand the main navigation panel (wy-nav-side shift), the page scrolls to the top, and, no matter if I was reading (saying) the middle of he page, as soon as I close it I am not where I left before openin the panel, but at the top of the page.

@umbe1987
Copy link
Author

Another thing I noticed: the top of the page content is hidedn bt the fixed mobile navigation bar. Maybe it has to do with me not having implemented margin-top: $gutter / 4 + 50px to .wy-nav-content as @jessetan suggested, but I can't seem to be able to do it without having the error "invalid css" for $gutter.

Am I missing something?

Anyway, happy to help if you need more info about this issue as I am very interested in this. Thank you!

mobile
immagine

desktop
immagine

Blendify added a commit that referenced this issue Apr 11, 2021
@Blendify
Header: Hide on scroll
e5091f4 
This patch solve the issue where users have to scroll to the top of the page to open the sidebar.

This patch will work best with #1122 but can be independent.

Fixes: #473
@Blendify Blendify linked a pull request Apr 11, 2021 that will close this issue
Open
Blendify added a commit that referenced this issue Apr 19, 2021
@Blendify
Squashed commit of the following:
9c36efb 
commit 201132b
Merge: fb6219c 2026bb6
Author: Aaron Carlisle <[email protected]>
Date:   Sun Apr 18 18:10:08 2021 -0400

    Merge branch 'master' into Blendify/fixed-header

commit fb6219c
Author: Aaron Carlisle <[email protected]>
Date:   Sun Apr 11 22:49:11 2021 -0400

    Add delta & adjust padding

commit 25ea466
Author: Aaron Carlisle <[email protected]>
Date:   Sun Apr 11 22:33:52 2021 -0400

    Move Header Height to variable

commit 0d8ed6d
Author: Aaron Carlisle <[email protected]>
Date:   Sun Apr 11 00:59:38 2021 -0400

    Update comment

commit e5091f4
Author: Aaron Carlisle <[email protected]>
Date:   Sun Apr 11 00:57:18 2021 -0400

    Header: Hide on scroll

    This patch solve the issue where users have to scroll to the top of the page to open the sidebar.

    This patch will work best with #1122 but can be independent.

    Fixes: #473
This was referenced Aug 19, 2022
Open
Open
This was referenced Nov 4, 2022
Open
Merged
@ShellCode33
Copy link

ShellCode33 commented Jul 29, 2024 •
edited
Loading

I would also really like this feature.
Some websites manage to hide the nav bar when you scroll down, and as soon as you scroll up just a bit the nav bar is back.
It's the best of both worlds, you can easily jump to another chapter while still using all your display when reading.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature New feature Needed: design decision A core team decision is required Theme Option
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Header: Hide on scroll readthedocs/sphinx_rtd_theme
5 participants
@agjohnson @jessetan @ShellCode33 @umbe1987 @Blendify