Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

navigation links sidebar overlays main body text on small screens #396

Closed
1 of 5 tasks
casa-albore opened this issue Jul 13, 2016 · 9 comments
Closed
1 of 5 tasks

Comments

@casa-albore
Copy link

casa-albore commented Jul 13, 2016

  • This is a question about using the theme.
  • I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
  • This is a feature request.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

Expected behavior

navigation sidebar either disappears when screen too narrow or scrolls away as the page is scrolled, does not overlay text from main page

Steps to reproduce the behavior

Visit the below page on a smaller width screen and scroll down a little:

https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

The navigation sidebar text overlays the main text.

I'd personally prefer the navigation text to be hidden when the screen is too narrow (navigation is possible from elsewhere anyway)...

@mmistakes
Copy link
Owner

Can you attach a screenshot of the overlap? I'm not seeing it.

@casa-albore
Copy link
Author

here's a screenshot with chrome/mac:

screen shot 2016-07-14 at 08 00 03

The same issue occurs on my android phone. It doesn't reproduce on firefox/mac or safari/mac

@mmistakes
Copy link
Owner

Ah yeah I see it. It's related to a pull request @ZenHarbinger submitted to cleanup the sidebar c3e2272

There's a bit of JavaScript in there that's probably not triggering properly on the custom sidebar shown in the Documentation section of the site.

Definitely a bug.

@ZenHarbinger
Copy link
Contributor

My bad, I guess there isn't always an author's button and it needs a hard width value. I can see if a better condition can be found.

At least I'm assuming that this situation doesn't have the author button.

I'll look at it when I get a chance.

@mmistakes
Copy link
Owner

mmistakes commented Jul 14, 2016

Sounds good. Thanks @ZenHarbinger

And yeah there's no author button on these sorts of sidebars. Pretty sure that's why I originally hard-coded the width in there.

Maybe fallback to that value if the author button isn't present so the sticky sidebar doesn't fire on smaller screens messing with the layout.

@ZenHarbinger
Copy link
Contributor

How do you generate your minimized javascript?

@mmistakes
Copy link
Owner

@ZenHarbinger Through a npm script that pipes it through UglifyJS.

Docs: https://mmistakes.github.io/minimal-mistakes/docs/javascript/

@ZenHarbinger
Copy link
Contributor

Awesome, one thing, can you update the page; I instead of

npm build:js

it's

npm run build:js

at least it is for node 6.3, if it's still that for 4.x, nevermind.
That is all, I'm working on this as we speak.

@mmistakes
Copy link
Owner

Good catch. It's a typo I missed.

mmistakes added a commit that referenced this issue Jul 14, 2016
sobkowiak pushed a commit to sobkowiak/sobkowiak.github.io-new that referenced this issue Jul 18, 2016
sobkowiak pushed a commit to sobkowiak/sobkowiak.github.io-new that referenced this issue Jul 18, 2016
cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this issue Dec 7, 2016
jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017
makaroniame added a commit to makaroniame/makaroniame-old.github.io that referenced this issue May 18, 2022
koyumi0601 pushed a commit to koyumi0601/koyumi0601.github.io that referenced this issue Jul 31, 2023
# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

3 participants