Static Side Bar

I know I have posts about sidebars scattered across this forum (sorry) but I’m on a quest. And I won’t stop until I find the holy grail.

I was able to create a static sidebar but it’s far from complete. It’s not responsive at all, and I can’t seem to get rid of the large white space gap between the sidebar and the page container.

Here’s the HTML component that’s placed in my Layout -

<div class="sidenav"><a
        Dashboard</a> <a href="!/leads">Leads</a>
    <a href="!/agents">Agents</a> <a

And here’s the layout CSS -

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;

/* Style page content */
.x-page-container {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}

And the results…

Anyone have any input on this?

Replying to myself here – replacing .x-page-container with .app fixes the white space between the menu and the content.

How about using the code from something like this, which is a responsive HTML and CSS menu?

I like that!

This is where I’m at now with my side bar.

Looking good. Is it responsive now too using that code?

Mine is not, no. But I don’t have to write any css for the sidebar, I think. I can just use the column settings in the builder to set what devices it’s visible on. On mobile, I don’t mind using the native tadabase menu

Ok so lots of changes here…

Here’s what I’m having trouble with now.

  1. Thumbnail wrapper on the {loggedInUser.Employee Photo} is restrictive. Discussed with Moe in another thread that access raw values (src) for logged in user fields will be added at some point.

  2. @moe you might be able to clarify this - i class icons are not showing up. They won’t even save in the HTML component after closing it and reopening. Here’s my example code.

    <li><i class="fa fa-home"></i><a href="#"> Home</a></li>

  3. @Chem this one is for your JS skills. The sidenav is collapsible until I add a field in the HTML. For example, loading my user photo in the sidenav with <div class="user-photo">{loggedInUser.Employee Photo}</div> breaks the JS. I’m assuming it has something to do with the {} brackets.


@tim.young Tim - how did you achieve the counter on the Messages and Settings - are you using JS?

No JS.

It’s not accurate in the screen shot because that’s before I changed it - just FYI. I created a count field to count the records assigned to the user in the notes table. Using that field in the HTML + CSS to create the “badge”

@tim.young the 'i" tag is not supported in the HTML editor, but I’ve whitelisted it so in our next update this will work and won’t get stripped out.

We’ll address the logged in user field raw values in the coming days as well.

@Chem I’ll let Chem dive into the JS issue here.

This design looks really solid. We’ll make this a setting in the menu in the coming weeks so you can bypass all of these tweaks.

We’re rolling out (today, hopefully) a few major updates in the data builder, plus a few other minor updates (like sort by several fields) etc.

After that we’ve got a few more updates in the page builder (drag and drop components, cleaner navigation etc.)

1 Like

The tag will now work and those icons should hopefully appear once you save the HTML again.

1 Like

Just clarify, you’ll be adding a sidebar option in the menu?

Correct. We’ll take your beautiful design and make it as an option when adding a menu.

There will be a 3rd menu option called “Vertical Slideout” and we’ll build all of these custom setting you did into the menu. Won’t be for a little while since we’re doing some more page builder optimization first.


Well jeez, I’m flattered!



@tim.young Hey Tim, do you know how the counter could be implemented with an existing tadabase layout - not an html menu.

@intelligroup Sure! First set up your field in whatever table you want, it’s going to be a count field - and it’s counting records in a connected table.

For me, the count field was created in the Users table, and it counted the number of Notes (from a connected Notes tabled) that the User was assigned to.

On a page, create a HTML component and below I’ll post the foundation of the design.

The HTML for the field is going to contain the count field. For the example here I’ll just use the number 6 and a link to the Notes page. Here’s the code.

<a href=""> Notes <span class="num flag">6</span></a>

By giving the span 2 classes - num and flag, you can style the num (the returned value of your count field) separately from the “badge”. For example, if you wanted to create different color badges for different purposes.

Here’s the CSS, styling the link a bit too.

a {
  color: #000;
  font-weight: 100;
  display: block;
  text-decoration: none;
  font-size: 18px;

.num {
  line-height: 0;
  border-radius: 3px;
  font-size: 14px;
  color: #fff;
  padding: 0px 5px;
.flag {
  background-color: #f35959;

Now you’ll just add whatever field you want in the element.

Here’s the result, you can play around with it -

1 Like

:heart_eyes: I really like your design and style!

Great GIF choice too! Best show ever made!


Hey @tim.young Did you figure this one out yet? It’s hard to know whats going on without looking at the setup. Feel free to @ me on support and I’ll be more than happy to take a look.

Hey Moe - is it possible to add the counter icons (like what tim did with his custom menu) to a Tadabase theme menu?