add collapsible menu and hamburger for mobile - closes #3 #10
Conversation
this screen size variable will determine when to use the hamburger
There was a problem hiding this comment.
Nice! Thanks a lot for the fantastic contribution!
I'm happy to merge after just a couple minor changes:
- Looks like
@import 'media-queries';has to be moved up in theassets/css/main.scsssincemedia-querymixin is used in the previous imports (otherwise, Jekyll refuses to build). Please move@import 'media-queries';from line 31 to line 8. - Please adjust the padding to make it consistent with one used in the
.scssfiles (see comments).
_sass/_header.scss
Outdated
| .menu-icon { | ||
| display: none; | ||
| } | ||
|
|
There was a problem hiding this comment.
Please adjust padding to 4 spaces per tab.
_sass/_header.scss
Outdated
| } | ||
| margin-left: 10px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Something is wrong with padding in this block as well. Please adjust.
_sass/_media-queries.scss
Outdated
| @content; | ||
| } | ||
| } | ||
|
|
|
I think I addressed all of the spacing updates (sorry) and I moved the media-query import up. |
|
On mobile, when I click on the publications page, the website becomes wider, and the menu button becomes hidden because it moves to the right instead of maintaining its position. Does it happen only to me? Can you fix it? Thanks! |
|
I'm not seeing that behavior on my iPhone, but when I use developer tools in Chrome and click on my publications page, I do see that behavior. It isn't like that for any other page on my iPhone or in Chrome. I have no idea what is different. See it live at http://jessachandler.com (note, I hid publications from my menu, but it is still constructed the same and can be found at /publications) |
|
Hi, thanks for your answer. On your website, I see the same behavior using Chrome from my Android phone. It is like the website zooms in when I go on the publications page. Do you know any workaround? |
|
@monkeywithacupcake Thanks again for the contribution! I'm merging this PR. @claudiogreco Yes, I'm aware of the problem with the publications page on small screens. The styles weren't originally designed to support mobile, so that could be fixed by updating/rewriting styles a bit. I am guessing that there are other potential problems (e.g., some fonts might appear too large on small screens). Please feel free to open separate issues for each problem you find, so we can track them better. I'll make sure to address them in the subsequent updates. And PRs are more than welcome as always! :) |
add collapsible menu and hamburger for mobile - closes #3 [ci skip]
add collapsible menu and hamburger for mobile - closes alshedivat#3 [ci skip]
add collapsible menu and hamburger for mobile - closes alshedivat#3
add collapsible menu and hamburger for mobile - closes alshedivat#3
Using the jekyll/minima construct as an example, I modified the al-folio theme to use a hamburger on mobile. It is collapsed by default, but the pages expand down when the hamburger is clicked.