Move main navigation to top left

API & Customization Show & Tell
1

Hi guys, just showing how to move the main navigation to the top right.

Here is the free code. Feel free to update and adjust the view ids with yours.

header .kn-container{
align-items: center;
display:flex;
justify-content: space-between;
}

.kn-content header a.kn-title{
border: 0;
margin-bottom: 0;
padding:0;
}

.kn-info-bar{
background-color: transparent;
border-bottom: 1px solid #dbdbdb;
}

#kn-app-menu nav.tabs li a{
background-color:transparent;
transition: all 0.5s;
}
#kn-app-menu nav.tabs li.is-active a{
color: #D0063F !important;
}

#kn-app-menu nav.tabs li a:hover{
color: #D0063F !important;
}

2

Nice, this buys a little more valuable screen real estate - Thanks!

3

Glad to see you are liking it!

4

Great share, thanks,  I have an immediate use for this!

5

Alejandro, this is really great, just what I needed! Thanks!!!

6

Hello Sam, could you send me the header's html code, to help you?

7

Hi Dan, to move the navigation and logo you can add this CSS line, header .kn-container {flex-direction:row-reverse}, also other options to flex-direction are column and column-reverse

8

Thanks, copying it did work for me. How can I move it up/down/left/right? Where would the modifications needed to be made go to make that happen? I've been trialing and error testing, but am not seeing a positive result.

9

Alejandro,

Thanks for sharing this! I copied and pasted into my app and nothing changed. You mentioned updating view ids, but I don't see any view ids in the snippet you posted.

10

Hi Dan, try adding the CSS into your app as it is, it should work straight away. Things you can customize are the background color of the navigation, the font color of the links, and the transition effect. Hope that helps. Best.

11

Alejandro, this looks really neat. Can you offer some additional guidance for a new user what specifically needs updated in your code to work and where to find that information?

12

Sorry, the title should have said '... to top right'