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

Footer breaks when using a browser toolbar #2281

Closed
stanulilic opened this issue Oct 13, 2019 · 6 comments
Closed

Footer breaks when using a browser toolbar #2281

stanulilic opened this issue Oct 13, 2019 · 6 comments

Comments

@stanulilic
Copy link

I use Chrome together with Mozbar Chrome extension from Moz to see the Domain Authority and Page Ranking score for every page I visit.

I noticed the theme footer breaks when I have enabled the toolbar as you can see in the screenshot below:

Screenshot from 2019-10-13 21-05-55

When I disabled it, the footer looks fine:

Screenshot from 2019-10-13 21-06-18

I also tried this with a different toolbar SEOQuake from SEMrush.

Screenshot from 2019-10-13 21-11-15

As you can see the footer breaks again.

It happens on my blog and It also happens here: https://mmistakes.github.io/minimal-mistakes/ as you can see from the screenshots. It is worse on my blog because it blocks the pagination.

Screenshot from 2019-10-13 21-30-21

You can easily recreate this by trying the Mozbar extension and then visit https://mmistakes.github.io/minimal-mistakes/.

@mmistakes
Copy link
Owner

mmistakes commented Oct 14, 2019

There's a bit of JavaScript that evaluates the height of the page to determine how much space it needs to stick to the bottom of the page.

My guess is the Moz and SEOrush toolsbars screw with that because they are adding their own sticky panels to the DOM. Not sure if there's anything I can do about how other scripts mess with the theme.

@mmistakes
Copy link
Owner

The Mozbar is injecting inline CSS to the body element to absolutely position it, which messes with the page layout. Don't think there's anything I can do about that.

body.mozbar-margin-wGA7MhRhQ3WS {
    margin-top: 43px;
    position: absolute;
    width: 100%;
}

@stanulilic
Copy link
Author

Okay. But I noticed on your website https://mademistakes.com/articles/, the footer doesn't break when using a toolbar. Perhaps, the solution could there?

@mmistakes
Copy link
Owner

mmistakes commented Oct 14, 2019

mademistakes.com is my personal site, it's not using the Minimal Mistakes theme at all. It's a custom built Jekyll site... with a completely different layout.

@mmistakes
Copy link
Owner

The faux-sticky footer effect will need to be rethought to get around plugins that try to rewrite the height of the page.

Flexbox might be able to help here instead of absolutely positioning the footer and then using the JavaScript hack to clear it.

@stanulilic
Copy link
Author

It would be awesome if it gets fixed. I was really worried that people who are using the toolbars wouldn't be able to access the pagination. They would simply assume that the site is broken.

kamil-adam pushed a commit to twocolumn/minimal-mistakes that referenced this issue Apr 1, 2020
jesuswasrasta pushed a commit to jesuswasrasta/jesuswasrasta.github.io that referenced this issue Jul 8, 2020
kaitokikuchi pushed a commit to kaitokikuchi/kaitokikuchi.github.io that referenced this issue Sep 4, 2023
chukycheese pushed a commit to chukycheese/chukycheese.github.io that referenced this issue Sep 18, 2023
# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants