# 🔀 CSS Hack: Toggling Between Top Bar and Side Bar

**URL:** <https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463>\
**Category:** Community Resources\
**Tags:** custom-css, custom-code\
**Created:** [September 19, 2025, 3:19am UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463 "2025-09-19T03:19:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 19, 2025, 3:19am UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463/1 "2025-09-19T03:19:22Z")

</div>

Sharing a little CSS magic I’ve been working on! ✨  
What if you could switch between a top navigation bar and side bar dynamically in Glide?

![ScreenRecording2025-09-16160234-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a4a360e85b2ef6bf0146df9b18e7419beee96935.gif)

![ScreenRecording2025-09-21193900-ezgif.com-crop](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/6975900447020dbf55dde2dfbbd8fea524566e2e.gif)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [September 19, 2025, 11:01am UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463/2 "2025-09-19T11:01:22Z")

</div>

Can you provide the solution? This is amazing!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 19, 2025, 4:10pm UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463/3 "2025-09-19T16:10:27Z")

</div>

It’s not really about the CSS — both bars are already in the DOM. Once it’s clear when and how to show or hide them, the rest falls into place. I’ve already shared enough clues in earlier posts, so it should click if following along.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 14, 2025, 1:35pm UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463/4 "2025-11-14T13:35:21Z")

</div>

Earlier I temporarily lost the code in the DOM, so I traced it back and reconstructed it to share here.  
The default layout setting is the left layout (sidebar), and _`.topbar`_ is the marker class for the top-bar layout.  
Here is the CSS:

```auto
#page-root:has(.topbar) #nav-root {
    display: flex;
}

#page-root:has(.topbar) .has-tab-bar .group {
    display: none;
}

#page-root:has(.topbar) .has-tab-bar {
    flex-direction: column;
}

```