Mobile CSS Sibebar and Settings Background colors

Things I have tried

I made snippets for desktop and nearly all of them work on mobile except all the sidebars and settings background colors.

What I’m trying to do

I just want my menus to look the same as on desktop, but it seems like maybe Mobile menus and sidebars have different CSS I guess? I just don’t know how to see them.

Hi @lousytrybrian

I found some references to “” for a lot of things in the app.css file from Obsidian. here are some that may or may not be what you are looking for:

.is-mobile .menu {
  max-height: calc(100% - 100px);
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  min-width: unset;
  position: absolute;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 10px 20px;
  left: 10px !important;
  top: unset !important;
  overflow-y: auto;
.is-mobile .menu-item {
  font-size: 18px;
  padding: 12px 16px;
  height: unset;
  line-height: unset;
.is-mobile .modal.mod-settings {
  background-color: var(--background-primary);
.is-mobile .modal.mod-settings .vertical-tab-header,
.is-mobile .modal.mod-settings .vertical-tab-nav-item {
  background-color: var(--background-primary);

Maybe some of those will help you? There are over 150 tagged with is-mobile.

If not I don’t know if I am allowed to post the app.css file here, but I could tell you how to extract it from the obsidian files if you are on windows (though it’s probably similar for Mac and Linux, I’m just too lazy to check).


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.