Disclaimer
Is this theme/snippet open source? N/A
Is this theme/snippet completely free? Yes
Is this theme/snippet vibe-coded beyond the author’s ability to comprehend how it works? No
I have an idea for a “mega mobile” topic, but for now, here are a few simple snippets if you’d like to adjust the mobile navbar a bit. I’m only changing the icon order and adding the visible sync state at the moment.
Change the order of the icons
I hold the phone in my right hand, and while I’m on board with the + (new-tab) button, I kept tapping it instead of the quick switcher with my thumb when reaching across. Swapping those two for me has cut down on extra tabs being opened. ![]()
.mobile-navbar-action-back { order: 1; }
.mobile-navbar-action-forward { order: 2; }
.mobile-navbar-action-new-tab { order: 3; }
.mobile-navbar-action-quick-switcher { order: 4; }
.mobile-navbar-action-tabs { order: 5; }
.mobile-navbar-action-menu { order: 6; }
Remove an icon
.mobile-navbar-action-new-tab {
display: none; }
Change navbar height and icon size
.mobile-navbar-actions {
--navbar-height: 45px; /* 52px */
--icon-size: 24px; /* 26px */ }
Change color of all icons
.mobile-navbar-actions {
--icon-color: rgb(196 98 16); }
Change color of certain icons
.mobile-navbar-action-new-tab .clickable-icon,
.mobile-navbar-action-quick-switcher .clickable-icon {
color: rgb(196 98 16); }
Add a sync state indicator around the navbar
Disable floating of the navbar
.is-phone {
--navbar-bottom-offset: 0; }
.mobile-navbar {
background-color: var(--background-primary);
border-radius: 0;
max-width: none;
width: 100%; }
Prevent the navbar from hiding
.is-hidden-nav .mobile-navbar {
transform: none;
opacity: 1; }
If anyone has any navbar tweaks that they find useful, feel free to send 'em along. ![]()



