Logo not showing in sidebar

[kattni]

Hello!

I currently have a custom header in place, so that could very easily be the issue here.

The docs mention that the logo in the header and sidebar link to the homepage, which implies to me that if I enable a logo, it should be showing in the sidebar. It does not, there is only the site title. That said, I may be misunderstanding the situation here.

I verified that it is seeing the logo by renaming it in the config to something nonexistent, and the build complains that it can't find the nonexistent one, but doesn't complain about the actual one. So, there is that.

Please let me know if I'm missing something here, or if there is something else I need to do to make this feature work.

Thanks!

[kattni]

I stumbled onto the following, which does show the logo, but I'm not sure if this is the proper solution. It was set to display: none which was hiding the logo.

.md-nav__title .md-nav__button {
    display: unset;
}

[kamilkrzyskow]

Hello again, could you check in your browser developer tools where does the display: none appear?
It should show the source file with a CSS rule.

Looking at your fix .md-nav__title .md-nav__button refers to the logo in the sidebar, and this is not part of the header at all 🤔
It only shows in mobile phone viewport.

Also your fix isn't enough for me as there is a label wrapper which also requires the same CSS rule override.
But now there are 2 logos, both in the header and sidebar, and the label adds another title, so it looks weird 🤔 if your header is empty or doesn't include the logo then the sidebar could be a good location for that 👍 and the CSS override is the way.

[kattni]

The sidebar is where I wasn't seeing the logo. The custom header is pulling the logo in a completely different way, so this wouldn't affect that.

The display: none; is coming from main.min.css - obviously it's overridden by my custom CSS, but you can see where it was coming from in the image.

[kamilkrzyskow]

Thanks. As mentioned above, with the default design from the Material theme, the logo should display in the sidebar only in mobile phone viewport. The CSS focuses on PC desktop layout first, so it hides the logo, as in the desktop layout it's shown in the header, and there is no need to display the logo twice on the page.

If you're using the mobile viewport and still don't see the logo then perhaps you're zoomed in on the page? Zooming on PC does change the scale of the objects, so it might have issues with correctly applying the CSS media query constraints for the viewport widths.

---

It works as designed, but let's assume you want the logo in both the Sidebar and Header even on Desktop layout.
Then the CSS you've provided is mostly correct, however you also need to do the same for the label wrapper element.
But it looks to be visible as well on the screenshot, because the DOM element isn't grayed out, so you have another CSS rule applied.

One issue I could see is the Sidebar title text inside the label wrapper, which doesn't have a span, so you can't select it directly with CSS. To modify it, you'd change the nav partial and add a span wrapper for the {{ config.site_name }} and then hide it with another CSS rule.

[kattni]

Oh! I understand now. I see it in the mobile viewport. It shows up as expected. Yes, we want the logo to appear in two places, as the header logo links to the main site, and the sidebar logo links back to the beginning of this docs project.

I was wondering what to do about the side bar title text. I noticed it was included, and wasn't sure what to do there. Thanks so much for clearing that up.