# Move Knack main navigation to the left
**URL:** https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665
**Category:** Show & Tell
**Created:** [August 27, 2019, 7:34pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665 "2019-08-27T19:34:46Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Soluntech](https://forums.knack.com/u/Soluntech)
#### Post date: [August 27, 2019, 7:34pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/1 "2019-08-27T19:34:46Z")
Here is a free code for improving Knack apps interface.
[Click here to see it in action](https://soluntech.knack.com/soluntech-test-custom-crm#home/)
/\*########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%;
}
---
### Author:  [@RyanWade37549](https://forums.knack.com/u/RyanWade37549)
#### Post date: [September 10, 2019, 8:58pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/2 "2019-09-10T20:58:46Z")
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?
---
### Author:  [@Abdelghani42247](https://forums.knack.com/u/Abdelghani42247)
#### Post date: [September 6, 2019, 5:21pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/3 "2019-09-06T17:21:52Z")
It did not work for me.I do not know how you did it because the main content is overlapping the side menu.
---
### Author:  [@RogerNeal13907](https://forums.knack.com/u/RogerNeal13907)
#### Post date: [September 2, 2019, 9:08am UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/4 "2019-09-02T09:08:01Z")
This works well - thank you
---
### Author:  [@Angie1](https://forums.knack.com/u/Angie1)
#### Post date: [March 26, 2023, 3:56pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/5 "2023-03-26T15:56:14Z")
This appears to only work with legacy settings. Any idea how to make it work after the new builder was introduced?
---
### Author:  [@KnackPros](https://forums.knack.com/u/KnackPros)
#### Post date: [March 27, 2023, 8:13pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/6 "2023-03-27T20:13:41Z")
Hi @Angie1
Here’s an updated version for the “Modern” design setting:
```auto
.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
---
### Author:  [@Angie1](https://forums.knack.com/u/Angie1)
#### Post date: [March 29, 2023, 7:07pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/7 "2023-03-29T19:07:13Z")
> [@KnackPros](#):
>
> ```auto
> .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;
> }
> }
>
> ```
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?
---
### Author:  [@KnackPros](https://forums.knack.com/u/KnackPros)
#### Post date: [March 29, 2023, 7:43pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/8 "2023-03-29T19:43:06Z")
@Angie1
You’re welcome. Here’s an updated version that allows you to control the buttons:
```auto
.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. */
}
}
```
---
### Author:  [@Angie1](https://forums.knack.com/u/Angie1)
#### Post date: [March 30, 2023, 8:51pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/9 "2023-03-30T20:51:41Z")
> [@Soluntech](#):
>
> html,body, .kn-content {
> height: 100%;
> }
That did not change the width of the buttons for me. They are still showing depending on the length of the page name.
---
### Author:  [@KnackPros](https://forums.knack.com/u/KnackPros)
#### Post date: [March 30, 2023, 9:56pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/10 "2023-03-30T21:56:27Z")
🤔
Hm. You can try adding the `important` property to the buttons.
Here’s the updated code, along with a screenshot:
Screenshot:
Code:
```auto
.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. */
}
}
```
---
### Author:  [@Angie1](https://forums.knack.com/u/Angie1)
#### Post date: [March 31, 2023, 6:34pm UTC](https://forums.knack.com/t/move-knack-main-navigation-to-the-left/6665/11 "2023-03-31T18:34:15Z")
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!