is there a way for me to customise the dawn theme so in desktop mode the nav bar looks like this? vertically to the left?
And then when it’s in mobile mode the nav bar is fixed to this bottom position?
The site you’re looking is a very old version of Broadcast theme, and built a custom rail in theme code, or had it done for them. Menu / Search / Wish List / Recent are overlays driven by the URL hash (#/search/, #/saved/, etc.) built on Alpine.js so they sit on top of whatever page you’re on. Dawn doesn’t work that way, so you’d want the look of it but with vanilla internals.
That could probably be done with Sidekick (with a lot of head aches) or a developer. Just add a snippet left-rail.liquid, render it in layout/theme.liquidor the header group. There are some good developers here that can help with that.
@vaniiccc Adding to what’s already been said — Dawn doesn’t ship with a vertical rail out of the box, but you can get close without a full rebuild: create a snippet (e.g. left-rail.liquid), include it in theme.liquid, and use CSS (position: fixed, flex column) to pin it left on desktop, with a media query to switch it to a fixed bottom bar on mobile. That keeps it vanilla Liquid + CSS rather than the Alpine.js overlay approach the Broadcast-based site uses. shopify theme dev is handy for previewing live before publishing. Happy to get more specific if you share what nav items you need!
I built and tested on Dawn.
Result:
Desktop
Mobile:
it hides Dawn’s normal top header so only the new bar shows.
Steps
- Online Store > Themes > on Dawn click Customize.
- In the left panel, under Header, click Add section > Custom Liquid.
- Paste the code below and Save.
Because it sits in the Header group it shows on every page.
The code
<style>
:root{ --rail-bg:#f4f0e6; --rail-fg:#1a1a1a; --rail-w:104px; }
.ck-nav a{ display:flex; flex-direction:column; align-items:center; gap:6px;
text-decoration:none; color:var(--rail-fg); font-size:12px; }
.ck-nav svg{ width:22px; height:22px; }
.ck-rail{ position:fixed; top:0; left:0; height:100vh; width:var(--rail-w); z-index:6;
display:flex; flex-direction:column; align-items:center; gap:30px;
padding:26px 0; background:var(--rail-bg); border-right:1px solid rgba(0,0,0,.08); }
.ck-rail .ck-nav__logo{ margin-bottom:14px; }
.ck-bar{ display:none; }
.section-header{ display:none !important; }
@media (min-width:990px){ body{ padding-left:var(--rail-w); } }
@media (max-width:989px){
.ck-rail{ display:none; }
body{ padding-bottom:78px; }
.ck-bar{ position:fixed; left:0; right:0; bottom:0; z-index:6;
display:flex; justify-content:space-around; align-items:flex-end;
padding:10px 10px 12px; background:var(--rail-bg); border-top:1px solid rgba(0,0,0,.08); }
.ck-bar .ck-nav__logo{ position:absolute; left:50%; top:-26px; transform:translateX(-50%);
width:56px; height:56px; border-radius:50%; background:var(--rail-bg);
display:flex; align-items:center; justify-content:center; box-shadow:0 -3px 8px rgba(0,0,0,.06); }
}
.ck-panel{ position:fixed; inset:0; z-index:20; background:var(--rail-bg);
display:none; padding:80px 24px; overflow:auto; }
.ck-panel:target{ display:block; }
.ck-panel__close{ position:absolute; top:22px; right:26px; font-size:30px; text-decoration:none; color:var(--rail-fg); }
.ck-panel ul{ list-style:none; margin:0; padding:0; max-width:640px; }
.ck-panel li{ border-bottom:1px solid rgba(0,0,0,.08); }
.ck-panel a.ck-link{ display:block; padding:16px 0; font-size:22px; text-decoration:none; color:var(--rail-fg); }
.ck-panel form{ max-width:640px; display:flex; gap:10px; }
.ck-panel input[type=search]{ flex:1; padding:14px; font-size:18px; border:1px solid rgba(0,0,0,.2); background:#fff; }
.ck-panel button{ padding:14px 22px; font-size:16px; border:0; background:var(--rail-fg); color:#fff; cursor:pointer; }
</style>
{%- capture nav -%}
<a href="#ck-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg><span>Menu</span></a>
<a href="#ck-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg><span>Search</span></a>
<a href="{{ routes.root_url }}pages/wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Wish List</span></a>
<a href="{{ routes.all_products_collection_url }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg><span>Recent</span></a>
{%- endcapture -%}
{%- capture logo -%}
<a href="{{ routes.root_url }}" class="ck-nav__logo">{% if settings.logo != blank %}<img src="{{ settings.logo | image_url: width: 96 }}" width="48" alt="{{ shop.name }}">{% else %}<span>{{ shop.name }}</span>{% endif %}</a>
{%- endcapture -%}
<nav class="ck-rail ck-nav">{{ logo }}{{ nav }}</nav>
<nav class="ck-bar ck-nav">
<a href="#ck-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg><span>Menu</span></a>
<a href="#ck-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg><span>Search</span></a>
{{ logo }}
<a href="{{ routes.root_url }}pages/wishlist"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M6 3h12v18l-6-4-6 4z"/></svg><span>Wish List</span></a>
<a href="{{ routes.all_products_collection_url }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg><span>Recent</span></a>
</nav>
<div id="ck-menu" class="ck-panel"><a href="#" class="ck-panel__close">×</a>
<ul>{%- for link in linklists['main-menu'].links -%}<li><a class="ck-link" href="{{ link.url }}">{{ link.title }}</a></li>{%- endfor -%}</ul>
</div>
<div id="ck-search" class="ck-panel"><a href="#" class="ck-panel__close">×</a>
<form action="{{ routes.search_url }}" method="get" role="search"><input type="search" name="q" placeholder="Search"><button type="submit">Search</button></form>
</div>
Notes
- Menu opens your Main menu, Search opens a search box. Both work out of the box.
- Wish List and Recent aren’t native to Dawn. They’re wired as links so the layout is complete. Point Wish List at a wishlist app, or swap those two for Cart and Account by changing their links.
- Colors and width are the three values at the top:
--rail-bg,--rail-fg,--rail-w. - Add your logo in Theme settings > Logo and it shows in the rail and in the mobile circle.
For a real Wish List: Wishlist Plus, Growave, or Wishlist King.
Regards,
Ploqo
The approaches above should work well. One small thing I’d add for the mobile bottom menu: make sure you leave enough bottom spacing on the page so the fixed nav doesn’t cover content.
It’s also worth adding padding-botto for iPhones. That keeps the menu nicely positioned above the home indicator.
Here you go — this targets Dawn’s default header classes. Paste this in any of your css file
@media screen and (min-width: 990px) {
/* Turn the header into a fixed left sidebar */
.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
overflow-y: auto;
border-bottom: none;
border-right: 1px solid rgba(var(--color-border), 0.2);
}
.header {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px 20px;
height: 100%;
}
/* Stack the menu vertically */
.header__inline-menu {
margin-top: 30px;
width: 100%;
}
.list-menu--inline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
/* Push page content to the right so it doesn't sit under the sidebar */
.shopify-section-header + * ,
main#MainContent {
margin-left: 240px;
}
/* Optional: hide the sticky header behavior since it's now a fixed sidebar */
.header-wrapper--sticky {
position: fixed;
}
}