Mobile Sidebar Elements to Top

Custom CSS & Theme Design
,
1

Continuing the discussion from Move mobile sidebar tab switcher & controls back to top:

I haven’t found it in the forum so I’ll post it here a “sidebar.css” snippet I took from a Kepano’s post on Reddit. (I don’t remember if I made extra modification but it may help some)

/* Obsidian Mobile Layout - Move Sidebar Elements to Top */

.is-phone {
  /* 1. Move the vault switcher and settings button to the top */
  .workspace-drawer-header {
    order: 0;
    padding-top: 0;
    padding-bottom: 16px;
    padding-inline-start: 20px;
  }
  
  .workspace-drawer-inner {
    padding-bottom: calc(max(var(--safe-area-inset-bottom), var(--size-4-4)) - var(--keyboard-height)); 
  }

  /* 2. Move the tab switcher to the top */
  .workspace-drawer-tab-options {
    order: 0;
  }
  
  .workspace-drawer-tab-options-list {
    padding-top: var(--touch-size-l);
    padding-bottom: var(--size-4-2);
    bottom: unset;
    top: 0;
  } 


  /* 3. Move the tab actions buttons to the top */
  .workspace-drawer .nav-buttons-container {
    position: static;
  }
}
1 Like
Move mobile sidebar tab switcher & controls back to top