Mobile navbar adjustments

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. :smiley:

.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. :beach_with_umbrella:

2 Likes