search

readthedocs / sphinx_rtd_theme

Sphinx theme from Read the Docs
https://sphinx-rtd-theme.readthedocs.io/
MIT License
4.75k stars 1.73k forks source link

Fixed top navigation bar in mobile #473

Open umbe1987 opened 6 years ago

umbe1987 commented 6 years ago

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 commented 6 years ago

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

jessetan commented 6 years ago

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.

umbe1987 commented 6 years ago

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!

umbe1987 commented 5 years ago

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 commented 5 years ago

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

ShellCode33 commented 1 month ago

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.