Keep the navbar always on top

This commit is contained in:
Emmanouil Konstantinidis 2017-02-01 15:09:18 +00:00
parent 9ae4d4fc61
commit 3866b2bcaf
3 changed files with 32 additions and 11 deletions

View File

@ -40,7 +40,7 @@
#page-content-wrapper { #page-content-wrapper {
width: 100%; width: 100%;
position: absolute; position: absolute;
padding: 15px; top: 80px;
} }
#wrapper.toggled #page-content-wrapper { #wrapper.toggled #page-content-wrapper {
@ -48,11 +48,15 @@
margin-right: -250px; margin-right: -250px;
} }
.top-navbar {
border-radius: 0;
}
/* Sidebar Styles */ /* Sidebar Styles */
.sidebar-nav { .sidebar-nav {
// position: absolute; position: absolute;
// top: 0; top: 80px;
width: 250px; width: 250px;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -106,6 +110,7 @@
.sidebar-wrapper .language-switcher { .sidebar-wrapper .language-switcher {
text-align: center; text-align: center;
margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
width: 250px; width: 250px;
} }
@ -144,6 +149,16 @@
.coredocs-section {
border-top: 2px solid lightgrey;
margin-top: 20px;
padding-top: 20px
}
.coredocs-section:first-child {
border-top: 0;
margin-top: 0;
}

View File

@ -15,7 +15,6 @@
<style>{{ code_style }}</style> <style>{{ code_style }}</style>
<style> <style>
.highlight {background-color: #f7f7f9} .highlight {background-color: #f7f7f9}
.coredocs-section {border-top: 2px solid lightgrey; margin-top: 20px; padding-top: 20px}
.checkbox label.control-label {font-weight: bold} .checkbox label.control-label {font-weight: bold}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-nav.navbar-right:last-child { .navbar-nav.navbar-right:last-child {
@ -28,6 +27,20 @@
<body data-spy="scroll" data-target="#sidebar-nav" data-offset="50"> <body data-spy="scroll" data-target="#sidebar-nav" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top top-navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="#document-title" class="navbar-toggle collapsed" id="menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">{{ document.title }}</a>
</div>
</div>
</nav>
<div id="wrapper"> <div id="wrapper">
{% include "rest_framework/docs/sidebar.html" %} {% include "rest_framework/docs/sidebar.html" %}
@ -36,7 +49,6 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><i class="fa fa-bars"></i></a>
{% include "rest_framework/docs/document.html" %} {% include "rest_framework/docs/document.html" %}
</div> </div>
</div> </div>
@ -86,10 +98,6 @@
languageControls.not('[data-language="' + language +'"]').parent().removeClass("active") languageControls.not('[data-language="' + language +'"]').parent().removeClass("active")
languageControls.filter('[data-language="' + language +'"]').parent().addClass("active") languageControls.filter('[data-language="' + language +'"]').parent().addClass("active")
console.log('-----');
console.log(button);
console.log('-----');
button.closest(".btn-group").find('.dropdown-toggle span').first().text(language) button.closest(".btn-group").find('.dropdown-toggle span').first().text(language)
var codeBlocks = $('pre.highlight') var codeBlocks = $('pre.highlight')

View File

@ -1,7 +1,5 @@
<!-- Sidebar --> <!-- Sidebar -->
<div id="sidebar-wrapper" class="sidebar-wrapper"> <div id="sidebar-wrapper" class="sidebar-wrapper">
<h3 class="sidebar-brand"><a href="#document-title">{{ document.title }}</a></h3>
<div class="language-switcher"> <div class="language-switcher">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">