fix styling

src/static/base.scss

-	.sidebar {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+.sidebar {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 40px;
+  z-index: 1000;
+  height: calc(100vh - 40px);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
 }
 
-.sidebar-sticky {
-  position: relative;
-  top: 0;
-  height: calc(100vh - 48px);
-  padding-top: .5rem;
-  overflow-x: hidden;
-  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-}
-
-@supports ((position: -webkit-sticky) or (position: sticky)) {
-  .sidebar-sticky {
-    position: -webkit-sticky;
-    position: sticky;
+.col-sb {
+  @media (min-width: 1200px) {
+    -ms-flex: 0 1 280px;
+    flex: 0 1 280px;
   }
 }
 
+
 #footer {
-    color: #777;
-    overflow: hidden;
-}
+  color: #777;
+  overflow: hidden;
+}
\ No newline at end of file

src/static/shared.scss

@@ -137,11 +137,7 @@ body {
   color: #333;
 }
 
-/* make div expand to contain float children */
-.float-container {
-  overflow: auto;
-  display: inline-block;
-}
+
 
 /* MESSAGES & ERRORS */
 ul.messagelist {

src/templates/base.html

@@ -48,16 +48,13 @@
 	<!-- Alerts -->
 
 	<div class="container-fluid ">
-	{% include "watermark.html" %}
-		<div class="row">
+		<div class="row flex-xl-nowrap">
 			<!-- sidebar -->
-			<nav class="col-md-1 d-none d-md-block bg-light navbar-light sidebar">
-				<div class="sidebar-sticky">
+			<nav class="col-md-3 col-xl-2 col-sb bg-light navbar-light sidebar">
 					{% block sidebar %}{% endblock %}
-				</div>
 			</nav>
 			<!-- Content -->
-			<div class="col-md-11 ml-sm-auto col-lg-11 px4">
+			<div class="col ml-sm-auto px4">
 				<main class="px4 bg-white" role="main">
 					{% block content %}{% endblock %}
 				</main>

src/templates/base_navbar.html

+{% load static %}
+{% load sass_tags %}
+
+	<link rel="stylesheet" type="text/css" href="{% sass_src 'base_navbar.scss' %}" />
+
+	<!-- Container -->
+	{% block navbar %}
+	<nav class="navbar navbar-expand grey-900 navbar-dark flex-column flex-md-row p-0 shadow">
+
+		<a class="navbar-brand col-sm col-md-3 col-xl-2 mr-0 col-sb" title="UCCPortal homepage">
+			<span class="nav-item float-right logo"></span>
+			<div class="font-weight-bold text-light float-right font-italic" text-light>UCCPORTAL</div>
+		</a>
+
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<div class="collapse navbar-collapse " id="navbarSupportedContent">
+			{% with url_name=request.resolver_match.url_name %}
+			<div class="navbar-nav mr-auto">
+				{% if not request.user.is_authenticated or request.user.is_staff %}
+				{% endif %}
+
+				{% if request.member %}
+				<a class="nav-item nav-link {{membership}}" href="{% url "memberdb:home" %}">Membership </a>
+				<a class="nav-item nav-link disabled">Account</a>
+				{% endif %}
+
+				{% if request.user.is_staff %}
+				<a class="nav-item nav-link {% block adminactive %}{% endblock %}" href="{% url "admin:index" %}">
+					Admin
+				</a>
+				<a class="nav-item nav-link {% if url_name == 'register' %}active{% endif %}"
+					href="{% url "memberdb:register" %}">Add Member</a>
+				{% endif %}
+
+			</div>
+
+			<div class="navbar-nav">
+				{% if request.user.is_authenticated and request.member %}
+
+				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
+					aria-haspopup="true" aria-expanded="false">
+					<i class="icon md-18 md-light" data-feather="user"></i>
+					Welcome, {{ request.user.username }}
+					<!--<div class="navbar-nav userinfo{ if request.user.is_authenticated %}{ if request.member %} groups{ endif %}">
+								{ if request.member %}
+									{ for g in request.member.groups %}<span class="group { g }}">{ g }}</span>{ endfor %}
+								{ endif %}
+							</div>-->
+				</a>
+				<div class="dropdown-menu dropdown-menu-right text-dark" aria-labelledby="navbarDropdownMenuLink">
+					<a class="dropdown-item disabled"> Dark theme: off</a>
+					<div class="dropdown-divider m-0"></div>
+					<a class="dropdown-item" href="{% url "memberdb:logout" %}">Logout</a>
+				</div>
+			</div>
+			{%else%}
+			<a class="btn btn-dark btn-sm my-1 border-light" href='{% url "memberdb:register" %}'>Signup</a>
+			<a class="nav-item nav-link" href="{% url "memberdb:login" %}">Login</a>
+			{%endif%}
+		</div>
+		{% endwith %}
+		</div>
+	</nav>
+	{% endblock %}
+