From f3a4e8510905fa18e03f95e7a83a6290b3c6ea68 Mon Sep 17 00:00:00 2001
From: abulojoshua1 <abulojoshua1@gmail.com>
Date: Wed, 2 Sep 2020 18:16:09 +0300
Subject: [PATCH] [Fixes #6412] Nav Toolbar Issue

---
 geonode/base/templates/base/menu.html | 14 ++++++++++++--
 geonode/static/geonode/css/base.css   | 14 ++++++++++++--
 geonode/static/geonode/less/base.less | 16 ++++++++++++++--
 geonode/templates/base.html           |  2 +-
 geonode/templates/index.html          |  4 ++--
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/geonode/base/templates/base/menu.html b/geonode/base/templates/base/menu.html
index e1df7b348c4..41516d045bd 100644
--- a/geonode/base/templates/base/menu.html
+++ b/geonode/base/templates/base/menu.html
@@ -46,5 +46,15 @@
     {% endif %}
 
 {% endfor %}
-
-
+<script type="text/javascript">
+window.addEventListener("load", function(){
+    var reposition = function() {
+        const nav_bar_height = $("#navbar").height();
+        $("#wrap").css("margin-top", (nav_bar_height - 20));
+        $("#ms-container").css("top", nav_bar_height);
+    };
+    reposition();
+    // attach the function to the window resize event
+    $(window).resize(reposition);
+});
+</script>
diff --git a/geonode/static/geonode/css/base.css b/geonode/static/geonode/css/base.css
index 5ac174bb60e..1e9ecbdee64 100644
--- a/geonode/static/geonode/css/base.css
+++ b/geonode/static/geonode/css/base.css
@@ -6853,7 +6853,7 @@ body {
   background: #333333;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
-  padding-top: 60px;
+  padding-top: 0;
 }
 a {
   color: #2c689c;
@@ -6900,6 +6900,7 @@ form input {
   padding-bottom: 40px;
   padding-top: 10px;
   width: 100%;
+  margin-top: 60px;
 }
 article.tab-pane {
   padding: 20px 0;
@@ -6925,6 +6926,9 @@ article.tab-pane {
   background-color: #333333;
   border: 0;
 }
+.navbar-inverse .nav-container {
+  margin: 0 2% 0 2%;
+}
 .navbar-inverse .navbar-nav > li > a {
   color: white;
   font-weight: 600;
@@ -7626,6 +7630,9 @@ nav.filter li a {
   width: 480px;
 }
 @media (max-width: 991px) {
+  body {
+    padding-top: 70px;
+  }
   #upload_form input[type="text"] {
     width: 360px;
   }
@@ -8177,7 +8184,7 @@ form-inline {
   border-radius: 4px;
 }
 .home .geonode-slide-show .jumbotron {
-  padding: 4.5em 0 0 0;
+  padding: 0;
 }
 .home .geonode-slide-show .jumbotron:after {
   background-image: none;
@@ -8248,3 +8255,6 @@ form-inline {
 .iso-categories .row a:hover span {
   background-color: black;
 }
+.jumbotron .gn-container {
+  margin-top: -2px;
+}
diff --git a/geonode/static/geonode/less/base.less b/geonode/static/geonode/less/base.less
index ec3aedbf7b9..b415b550785 100644
--- a/geonode/static/geonode/less/base.less
+++ b/geonode/static/geonode/less/base.less
@@ -46,7 +46,7 @@ body {
   background: @gray-dark;
   font-family: @font-family-sans-serif;
   font-size: @font-size-base;
-  padding-top: 60px;
+  padding-top: 0;
 }
 
 a {
@@ -102,6 +102,7 @@ form {
   padding-bottom: 40px;
   padding-top: 10px;
   width: 100%;
+  margin-top: 60px;
 }
 
 article.tab-pane {
@@ -132,6 +133,10 @@ article.tab-pane {
   background-color: @gray-dark;
   border: 0;
 
+  .nav-container {
+    margin: 0 2% 0 2%;
+  }
+
   .navbar-nav > li > a {
     color: white;
     font-weight: 600;
@@ -1031,6 +1036,10 @@ nav.filter {
 }
 
 @media (max-width: 991px) {
+  body {
+    padding-top: 70px;
+  }
+
   #upload_form {
     input[type="text"] {
       width: 360px;
@@ -1706,7 +1715,7 @@ form-inline {
 }
 
 .home .geonode-slide-show .jumbotron {
-	padding: 4.5em 0 0 0;
+	padding: 0;
 	&:after {
 		background-image: none;
 	}
@@ -1776,3 +1785,6 @@ form-inline {
       background-color: black;
     }
 }
+.jumbotron .gn-container {
+    margin-top: -2px;
+}
diff --git a/geonode/templates/base.html b/geonode/templates/base.html
index fa614e3b0fd..3b4c51410fe 100644
--- a/geonode/templates/base.html
+++ b/geonode/templates/base.html
@@ -276,7 +276,7 @@
     <!-- Navbar -->
     {% block header %}
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
-    <div class="container">
+    <div class="nav-container">
         <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
           <i class="fa fa-navicon fa-lg"></i>
diff --git a/geonode/templates/index.html b/geonode/templates/index.html
index 9afdd6170b6..e6967ad9d85 100644
--- a/geonode/templates/index.html
+++ b/geonode/templates/index.html
@@ -18,7 +18,7 @@
 
 {% if custom_theme.welcome_theme == 'JUMBOTRON_BG' or not slides %}
 <div class="jumbotron">
-  <div class="container">
+  <div class="container gn-container">
       {% with jumbotron_welcome_title=custom_theme.jumbotron_welcome_title|default:"Welcome"|template_trans %}
       <h1>{% trans jumbotron_welcome_title %}</h1>
       {% endwith %}
@@ -36,7 +36,7 @@ <h1>{% trans jumbotron_welcome_title %}</h1>
 {% else %}
 <div class="geonode-slide-show">
 	<div class="jumbotron jumbotron--no_bg">
-	   <div class="container">
+	   <div class="container gn-container">
 		  <div id="myCarousel" class="carousel slide" data-ride="carousel">
 			 <!-- Indicators -->
 			 {% if slides.count > 1%}