Move Knack main navigation to the left

API & Customization Show & Tell
1

Here is a free code for improving Knack apps interface.

Click here to see it in action

/*########Move Navigation to left - Sidebar#############################*/

html,body, .kn-content {
height: 100%;
}

.kn-content {
position: relative;
}

.kn-info{
margin-left: 300px;
}

.kn-info .kn-current_user{
padding-right: 12px;
}

@media screen and (min-width: 769px){
#kn-app-header{
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 250px;
}
.kn-section .kn-container{
margin-left: 300px;
}
}

#app-menu-list li{
width:100%;
}

2

This is really close to what I'm looking for. When I try it, though, the logo doesn't go to the top - it's gets squished to the side (left). Also, how do I make sure the dropdown menus pop to the right instead of straight down?

3

It did not work for me.I do not know how you did it because the main content is overlapping the side menu.

4

This works well - thank you

5

This appears to only work with legacy settings. Any idea how to make it work after the new builder was introduced?

6

Hi @Angie1

Here’s an updated version for the “Modern” design setting:

.kn-content {
  position: relative;
}
.kn-info {
  margin-left: 200px;
}
.kn-info .kn-current_user {
  padding-right: 12px;
}
@media screen and (min-width: 769px) {
  header.knHeader {
    position: absolute;
    height: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
    width: 250px;
  }

  .kn-section .kn-container {
    margin-left: 280px;
    max-width: 80vw;
  }
}

Ian

1 Like
7

Thank you very much! The only thing that is viewing different is that all of the buttons are viewing different sizes depending on the name of the page. Any fix for that?

8

@Angie1

You’re welcome. Here’s an updated version that allows you to control the buttons:

.kn-content {
  position: relative;
}
.kn-info {
  margin-left: 200px;
}
.kn-info .kn-current_user {
  padding-right: 12px;
}
@media screen and (min-width: 769px) {
  header.knHeader {
    position: absolute;
    height: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
    width: 250px;
  }

  .kn-section .kn-container {
    margin-left: 280px;
    max-width: 80vw;
  }

  .knHeader .knHeader__menu-list-item,
  .knHeader .knHeader__menu-link--button {
    min-width: 100%; /* This makes the buttons full width */
    justify-content: start; /* This makes the button text left-aligned. Remove it if you prefer to center the button text. */
  }
}
9

That did not change the width of the buttons for me. They are still showing depending on the length of the page name.

10

:thinking:

Hm. You can try adding the important property to the buttons.

Here’s the updated code, along with a screenshot:

Screenshot:

left menu with buttons
left menu with buttons640Ă—824 17.6 KB

Code:

.kn-content {
  position: relative;
}
.kn-info {
  margin-left: 200px;
}
.kn-info .kn-current_user {
  padding-right: 12px;
}
@media screen and (min-width: 769px) {
  header.knHeader {
    position: absolute;
    height: 100%;
    min-height: 100vh;
    left: 0;
    top: 0;
    width: 250px;
  }

  .kn-section .kn-container {
    margin-left: 280px;
    max-width: 80vw;
  }

  .knHeader .knHeader__menu-list-item,
  .knHeader .knHeader__menu-link--button {
    min-width: 100%!important; /* This makes the buttons full width */
    justify-content: start!important; /* This makes the button text left-aligned. Remove it if you prefer to center the button text. */
  }
}
11

Thanks, I had tried that but for some reason it didn’t work for me and now just copied and pasted your update and it worked. I must have had something wrong. Sure appreciate the help and fast responses!