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

Fix nav items alignment when in "burger" mode #3329

Merged
merged 1 commit into from Jan 24, 2015

Conversation

Projects
None yet
5 participants
@tkrotoff
Contributor

tkrotoff commented Jan 19, 2015

I have introduced a bug with this pull request when the menu is in "burger" mode:

"burger" mode bug

Original CSS rule:

.page-link {
    &:not(:first-child) {
        margin-left: 20px;
   }
}

First pull request to fix nav items on multiple lines:

.page-link {
    &:not(:last-child) {
        margin-right: 20px;
    }
}

And we also need this to fix the "burger" menu:

@include media-query($on-palm) {
    .page-link {
        margin-right: 0 !important;
        margin-left: 20px;
    }
}
@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jan 19, 2015

Member

We have a "burger" mode?

Member

parkr commented Jan 19, 2015

We have a "burger" mode?

@kleinfreund

This comment has been minimized.

Show comment
Hide comment
@kleinfreund

kleinfreund Jan 19, 2015

Contributor

Vertically stacked navigational items that is. :P

Contributor

kleinfreund commented Jan 19, 2015

Vertically stacked navigational items that is. :P

@@ -82,6 +82,9 @@
.page-link {
display: block;
padding: 5px 10px;
margin-right: 0 !important;

This comment has been minimized.

@alfredxing

alfredxing Jan 24, 2015

Member

Not a big fan of !important. Any way to get around this?

@alfredxing

alfredxing Jan 24, 2015

Member

Not a big fan of !important. Any way to get around this?

@parkr parkr merged commit 3e609b1 into jekyll:master Jan 24, 2015

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details

parkr added a commit that referenced this pull request Jan 24, 2015

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jan 24, 2015

Member

Whoops, sorry @alfredxing! Didn't see your comment. How would you propose getting around it? Maybe having a @media style?

Member

parkr commented Jan 24, 2015

Whoops, sorry @alfredxing! Didn't see your comment. How would you propose getting around it? Maybe having a @media style?

@alfredxing

This comment has been minimized.

Show comment
Hide comment
@alfredxing

alfredxing Jan 27, 2015

Member

We would need the same level of specificity (:not(:last-child)) so the media query would override the original rule:

@include media-query($on-palm) {
    ...
    .page-link {
        display: block;
        padding: 5px 10px;
        margin-left: 20px;

        &:not(:last-child) {
            margin-right: 0;
        }
    }
}

@parkr Should I submit a PR or get @tkrotoff to update his branch?

Member

alfredxing commented Jan 27, 2015

We would need the same level of specificity (:not(:last-child)) so the media query would override the original rule:

@include media-query($on-palm) {
    ...
    .page-link {
        display: block;
        padding: 5px 10px;
        margin-left: 20px;

        &:not(:last-child) {
            margin-right: 0;
        }
    }
}

@parkr Should I submit a PR or get @tkrotoff to update his branch?

@tkrotoff

This comment has been minimized.

Show comment
Hide comment
@tkrotoff

tkrotoff Jan 27, 2015

Contributor

@alfredxing 👍 tested and works fine

Contributor

tkrotoff commented Jan 27, 2015

@alfredxing 👍 tested and works fine

tkrotoff added a commit to tkrotoff/osteo15.com that referenced this pull request Feb 16, 2015

@jekyll jekyll locked and limited conversation to collaborators Feb 27, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.