Hi All,
I have been looking at changing the UI on Knack and making it more user friendly for my app, I have replaced the current horizontal menu with a Boostrap Nav menu which also sticks to the top when the page is scrolled and moves the loge from the header to the nav bar (See pics attached).
I have also made it put tables in views in to tabs rather than under each other using jQuery tabs.
I have not tested this lots yet and have seen some issues with the fixing of the navbar on scrolling (Bouncing), I have also only currently changed the navbar based on logged in or not but it can be improved with checking logged in user roles and showing/hiding individual menu items too.
There are probably many improvements but I just wanted to see if Knack could be changed to suit until the devs add these things to the core.
The code is below (JS and CSS) but you will need to use your own hosted logo
$(document).on('knack-page-render.any', function(event, page) {
if (Knack.getUserAttributes(name) == "No user found") {
if ($("#kn-app-menu2").length === 0) {
$('#kn-app-menu').replaceWith('<div id="kn-app-menu2"><nav class="navbar navbar-default navbar-static-top" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header" style="display: none;"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#home">Home</a></li><ul></li></ul></div><!-- navbar-collapse --></nav></div>');
} else {
$('#kn-app-menu2').replaceWith('<div id="kn-app-menu2"><nav class="navbar navbar-default navbar-static-top" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header" style="display: none;"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#home">Home</a></li><ul></li></ul></div><!-- navbar-collapse --></nav></div>');
}
} else {
if ($("#kn-app-menu2").length === 0) {
$(’#kn-app-menu’).replaceWith(’<div id=“kn-app-menu2”><nav class=“navbar navbar-default navbar-static-top” role=“navigation”><!-- Brand and toggle get grouped for better mobile display --><div class=“navbar-header” style=“display: none;”><button type=“button” class=“navbar-toggle” data-toggle=“collapse” data-target="#bs-example-navbar-collapse-1"><span class=“sr-only”>Toggle navigation</span><span class=“icon-bar”></span><span class=“icon-bar”></span><span class=“icon-bar”></span></button><a class=“navbar-brand” href="#"></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class=“collapse navbar-collapse” id=“bs-example-navbar-collapse-1”><ul class=“nav navbar-nav”><li class=“active”><a href="#home">Home</a></li><li class=“dropdown”><a href="#" class=“dropdown-toggle” data-toggle=“dropdown” aria-expanded=“false”>Customers <b class=“caret”></b></a><ul class=“dropdown-menu”><li><a href="#customercompanies">Companies</a></li><li><a href="#customerdivisions">Divisions</a></li><li class=“divider”></li><li><a href="#customersites">Sites</a></li><li class=“divider”></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class=“navbar-form navbar-left” role=“search”><div class=“form-group”><input type=“text” class=“form-control” placeholder=“Search”></div><button type=“submit” class=“btn btn-default”>Submit</button></form><ul class=“nav navbar-nav navbar-right”><li><a href="#">Link</a></li><li class=“dropdown”><a href="#" class=“dropdown-toggle” data-toggle=“dropdown”>Dropdown <b class=“caret”></b></a><ul class=“dropdown-menu”><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class=“divider”></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- navbar-collapse --></nav></div>’);
} else {
$(’#kn-app-menu2’).replaceWith(’<div id=“kn-app-menu2”><nav class=“navbar navbar-default navbar-static-top” role=“navigation”><!-- Brand and toggle get grouped for better mobile display --><div class=“navbar-header” style=“display: none;”><button type=“button” class=“navbar-toggle” data-toggle=“collapse” data-target="#bs-example-navbar-collapse-1"><span class=“sr-only”>Toggle navigation</span><span class=“icon-bar”></span><span class=“icon-bar”></span><span class=“icon-bar”></span></button><a class=“navbar-brand” href="#"></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class=“collapse navbar-collapse” id=“bs-example-navbar-collapse-1”><ul class=“nav navbar-nav”><li class=“active”><a href="#home">Home</a></li><li class=“dropdown”><a href="#" class=“dropdown-toggle” data-toggle=“dropdown” aria-expanded=“false”>Customers <b class=“caret”></b></a><ul class=“dropdown-menu”><li><a href="#customercompanies">Companies</a></li><li><a href="#customerdivisions">Divisions</a></li><li class=“divider”></li><li><a href="#customersites">Sites</a></li><li class=“divider”></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class=“navbar-form navbar-left” role=“search”><div class=“form-group”><input type=“text” class=“form-control” placeholder=“Search”></div><button type=“submit” class=“btn btn-default”>Submit</button></form><ul class=“nav navbar-nav navbar-right”><li><a href="#">Link</a></li><li class=“dropdown”><a href="#" class=“dropdown-toggle” data-toggle=“dropdown”>Dropdown <b class=“caret”></b></a><ul class=“dropdown-menu”><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class=“divider”></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- navbar-collapse --></nav></div>’);
}
}
var logo_height2 = $('#knack-logo').height();
var fixblock_pos2 = $('#kn-app-menu2').position().top + logo_height2;
var menu_height = $('#kn-app-menu2').height();
var noofscrolls = 0;
$(window).scroll(function(){
if ($(window).scrollTop() > fixblock_pos2) {
if (noofscrolls < 1) {
$('div.navbar-header').css('display', 'block');
$('div.navbar-header > a.navbar-brand').replaceWith('<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/assets.knackhq.com/assets/YourAppID/logos/YourLogo.png" style="border: 0px; width: 80px; height: 50px"></a>');
$('#kn-app-menu2 > nav').removeClass("navbar-static-top").addClass("navbar-fixed-top");
$('.kn-view.kn-info').css({'position':'fixed', 'top': + menu_height + 'px'});
noofscrolls = 1
}
} else {
$('div.navbar-header').css('display', 'none');
$('#kn-app-menu2 > nav').removeClass("navbar-fixed-top").addClass("navbar-static-top");
$('.kn-view.kn-info').css({'position': 'static', 'width': '100%'});
noofscrolls = 0;
}
})
});
$(’<link rel=“stylesheet” href=“https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css” type=“text/css” media=“screen” /><link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” type=“text/css” media=“screen” />’).insertBefore(’#knack-dist_1’);
var fwg_js_files = [‘https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js’, ‘https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js’];
LazyLoad.js(fwg_js_files, function () {
var tableName;
var tableRecordCount;
$(document).on(‘knack-records-render.any’, function(event, view, records) {
tableName = view.name;
tableRecordCount = records.length;
console.log (tableName + ‘,’ + tableRecordCount);
});
$(document).on(‘knack-scene-render.scene_34’, function(event, scene) {
$(“div.kn-table”).first().before(’<div id=“tabs”><ul>’);
$(“div.kn-table”).each(function (index){
$(this).parent().find(’#tabs > ul’).append(’<li><a href="#tabcontent-’ + index + ‘">’ + $(this).find(’.view-header > h2’).text() + ’ (’ + $(this).find(‘td.field_227’).text() + ‘)’ + ‘</a></li>’);
});
$(“div.kn-table”).each(function (index){
$(this).parent().find(’#tabs’).append(’<div id=“tabcontent-’ + index + '”>’);
});
$(“div.kn-table”).each(function (index){
$(this).appendTo(’#tabcontent-’ + index + ‘’);
});
jQuery( “#tabs” ).tabs();
});
$(document).on(‘knack-view-render.view_48’, function (event, view) {
// Add a bootstrap button group
$(’#’ + view.key).prepend(’<div class=“btn-group”><button id=“menu_button” class=“btn btn-default” contenteditable=“false”>Customers</button><button data-toggle=“dropdown” class=“btn btn-default dropdown-toggle” aria-expand=“false”><span class=“caret”></span></button><ul class=“dropdown-menu” contenteditable=“false”><li><a href="#">Companies</a></li><li><a href="#tabcontent-1">Jobs</a></li></ul></div>’);
});
});
div.kn-login {
margin-left: 50%;
transform: translate(-25%, 0%);
}
#kn-app-menu2 {
z-index: 9998;
}
.navbar {
margin-bottom: 0px !important;
}
.navbar-brand {
padding: 1px 15px !important;
}
#tabs {
margin: 3px;
border: none !important;
}
.ui-tabs-panel {
border: 1px solid #aaa !important;
}
.ui-widget-header {
border: none !important;
background: none !important;
}
ul.ui-tabs-nav li a {
background: #074376 !important;
color: #fff !important;
}
ul.ui-tabs-nav li.ui-state-active a {
background: #fff !important;
color: #000 !important;
outline: none !important;
}
The CSS is for the attached screenshots so remove/change as required.
Enjoy 
Thanks
Dan