search

mmistakes / minimal-mistakes

:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.
https://mmistakes.github.io/minimal-mistakes/
MIT License
12.48k stars 25.74k forks source link

Issue with image on top of sidebar when sidebar is collapsed #2176

Closed thomaspeyrin closed 5 years ago

thomaspeyrin commented 5 years ago

Hi,

I added a small image on top of my sidebar, as depicted here: https://mmistakes.github.io/minimal-mistakes/layout-sidebar-custom/

However, I remarked that when making the window smaller, at some point the image on top of the sidebar becomes huge (the sidebar is collapsed, but not the image on top of it).

Is there a way to either:

Thanks for the help !

mmistakes commented 5 years ago

The navigation list in the sidebar is it's own thing, the image and content above it aren't part of the collapse.

If you know CSS it's possible to to hide the image or size it differently. You'll need to use media queries to target the screen size you want to make changes to the image. If you dig through some of the Sass partials used by the theme I'm using Breakpoint mixins to declare the media queries.

A very basic example you could do is, hide the sidebar image, then show on desktop and larger.

.sidebar {
  img {
    display: none;

    @include breakpoint($large) {
      display: block;
    }
}
thomaspeyrin commented 5 years ago

Added your code in /_sass/minimal-mistakes/_sidebar.scss , worked perfectly. Thanks !