# Mobile Toolbar via Hamburger Menu

**URL:** https://community.silverbullet.md/t/mobile-toolbar-via-hamburger-menu/3776
**Category:** Tricks & Techniques
**Created:** [January 18, 2026, 7:51am UTC](https://community.silverbullet.md/t/mobile-toolbar-via-hamburger-menu/3776 "2026-01-18T07:51:17Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![adxsoft](https://community.silverbullet.md/user_avatar/community.silverbullet.md/adxsoft/32/2789_2.png) [@adxsoft](https://community.silverbullet.md/u/adxsoft)
#### Post date: [January 18, 2026, 7:51am UTC](https://community.silverbullet.md/t/mobile-toolbar-via-hamburger-menu/3776/1 "2026-01-18T07:51:17Z")

</div>

My first post. Coming from Obsidian then Logseq. Loving silverbullet and the ease of customisation. I wanted to get a mobile toolbar up and running and found I could implement one easily by making a space-style tweaks and secondly by adding action buttons in the CONFIG page. My changes are shown below.

**1. STYLE** Here are the style changes (I keep them in “Library/adxsoft/Global Style” page) which change the button heights in the hamburger menu for mobile. That way I’ve got way more buttons. Note I also colorise headings and the hamburger menu. The key thing is to change the height as indicated. On my Samsung phone 1.4 rem worked well.

````auto
```space-style
html {
  --editor-width: 60%;
}

/* ===== Mobile settings ===== */
@media (max-width: 600px) {
  html {
    --editor-width: 100%;
  }

  /* hamburger menu smaller buttons on mobile */
  #sb-top .sb-actions.hamburger button:not(.sb-code-copy-button) {
          height: 1.4rem; /* !!!!! adjust height to suit your mobile !!!!!!! */
          margin: 4px 0;
          padding: 4px 0;
  }
}

    
/* hamburger menu colors */
#sb-root .sb-actions button {
  color: #c39952e6;
}

/* heading colors */
#sb-main .cm-editor .sb-line-h1 {
  color: #c39952e6;
}

#sb-main .cm-editor .sb-line-h2 {
  color: #ff6666;
}

#sb-main .cm-editor .sb-line-h3 {
  color: #66ccff;
}

#sb-main .cm-editor .sb-line-h4 {
  color: #99cc66;
}

#sb-main .cm-editor .sb-line-h5 {
  color: #cc99ff;
}

#sb-main .cm-editor .sb-line-h6 {
    color: #ec7385;
  }

/* change backticked and plain triple back tick code block colors */
#sb-editor .sb-code {
    background: #444444 !important;
    color: #8cbdf4;
    text-decoration: none !important;
  }
```

````

**2. CONFIG** I’ve added action buttons to assist with mobile not having keyboard shortcuts. _Note I’m not sure why the Index, open page and run command buttons don’t appear as the first 3 buttons._ However this works well for me

````auto
```space-lua
-- Add your plugs here (https://silverbullet.md/Plugs)
      -- Then run the `Plugs: Update` command to update them
config.set(
"plugs", {
  "ghr:MrMugame/silversearch",
  "github:joekrill/silverbullet-treeview/treeview.plug.js"
})

actionButton.define {
  icon = "sidebar",
  description = "Toggle Tree View",
  run = function()
    editor.invokeCommand("Tree View: Toggle")
  end
}

actionButton.define {
  icon = "inbox",
  description = "Quick Note",
  run = function()
           editor.invokeCommand("Quick Note")
           end,
  mobile =true
}

actionButton.define {
  icon = "bold",
  description = "Bold",
  run = function()
           editor.invokeCommand("Bold")
           end,
  mobile =true
}

actionButton.define {
  icon = "italic",
  description = "Italic",
  run = function()
           editor.invokeCommand("Italic")
           end,
  mobile =true
}

actionButton.define {
  icon = "delete",
  description = "Delete",
  run = function()
           editor.invokeCommand("Page: Delete")
           end,
}

actionButton.define {
  icon = "rotate-ccw",
  description = "Undo",
  run = function()
           editor.invokeCommand("Editor: Undo")
           end,
}

actionButton.define {
  icon = "rotate-cw",
  description = "Redo",
  run = function()
           editor.invokeCommand("Editor: Redo")
           end,
}

actionButton.define {
  icon = "arrow-right",
  description = "Indent",
  run = function()
           editor.invokeCommand("Outline: Move Right")
           end,
  mobile =true
}

actionButton.define {
  icon = "arrow-left",
  description = "Indent",
  run = function()
           editor.invokeCommand("Outline: Move Left")
           end,
  mobile =true
}

actionButton.define {
  icon = "arrow-up",
  description = "Move Line Up",
  mobile = true,
  run = function()
    editor.moveLineUp()
  end
}
actionButton.define {
  icon = "arrow-down",
  description = "Move Line Down",
  mobile = true,
  run = function()
    editor.moveLineDown()
  end
}

actionButton.define {
  icon = "search",
  description = "Search Area",
  run = function()
    silversearch.openSearch("path:AREA/")
  end
}
actionButton.define {
  icon = "globe",
  description = "Search Global",
  run = function()
    silversearch.openSearch("")
  end
}
```

````

PS. If anyone has the standard docker running in a synology NAS I would appreciate their synology modifications to handle passing htrough **http** requests.

Cheers