<div dir="ltr">Dear all,<br><br><p style="margin-top:0px;margin-right:0px;margin-left:0px;padding:0px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;box-sizing:inherit;clear:both;color:rgb(36,39,41)">I am in need to hide the geonode navbar on mouse out and show on mouse over just like in <a href="https://stackoverflow.com/questions/50146726/make-a-navbar-hidden-until-mouse-hover" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">1</a>. The django app is using Bootstrap4. According to W3School BootStrap4 has .collapse class <a href="https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp" rel="nofollow noreferrer" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">2</a>. From a BootStrap4 perspective, I am still figuring out I could use the collapse class with hover. On the other hand, by just using css, I went through the first attempt following something like in <a href="https://stackoverflow.com/questions/50146726/make-a-navbar-hidden-until-mouse-hover" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">3</a>.</p><blockquote style="padding:0.8em 0.8em 0.8em 1em;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;quotes:none;box-sizing:inherit"><p style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit;clear:both">HTML</p></blockquote><pre class="gmail-default gmail-s-code-block" style="margin-top:0px;padding:12px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:1.30769;font-size:13px;vertical-align:baseline;box-sizing:inherit;width:auto;max-height:600px;overflow:auto;border-radius:5px"><code class="gmail-hljs gmail-language-xml" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit">  <span class="gmail-hljs-tag" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit"><<span class="gmail-hljs-name" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">div</span> <span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">id</span>=<span class="gmail-hljs-string" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">"nav_general"</span>></span>
            <span class="gmail-hljs-tag" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit"><<span class="gmail-hljs-name" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">nav</span> <span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">id</span>=<span class="gmail-hljs-string" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">"navbar"</span> <span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">class</span>=<span class="gmail-hljs-string" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">"navbar navbar-inverse navbar-fixed-top"</span> <span class="gmail-hljs-attr" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">role</span>=<span class="gmail-hljs-string" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">"navigation"</span>></span>
            <span class="gmail-hljs-tag" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit"></<span class="gmail-hljs-name" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">nav</span>></span>
  <span class="gmail-hljs-tag" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit"></<span class="gmail-hljs-name" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">div</span>></span>
</code></pre><blockquote style="padding:0.8em 0.8em 0.8em 1em;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;quotes:none;box-sizing:inherit"><p style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit;clear:both">CSS</p></blockquote><pre class="gmail-default gmail-s-code-block" style="margin-top:0px;padding:12px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:1.30769;font-size:13px;vertical-align:baseline;box-sizing:inherit;width:auto;max-height:600px;overflow:auto;border-radius:5px"><code class="gmail-hljs gmail-language-css" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit;background-color:transparent;white-space:inherit"><span class="gmail-hljs-selector-class" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">.home</span> <span class="gmail-hljs-selector-id" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">#navbar</span> {
      <span class="gmail-hljs-attribute" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">display</span>: flex;
      <span class="gmail-hljs-attribute" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">transform</span>: <span class="gmail-hljs-built_in" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">translateY</span>(-<span class="gmail-hljs-number" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">100%</span>);
    }
    
    <span class="gmail-hljs-selector-class" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">.home</span> <span class="gmail-hljs-selector-id" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">#nav_general</span><span class="gmail-hljs-selector-pseudo" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">:hover</span> <span class="gmail-hljs-selector-id" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">#navbar</span> {
      <span class="gmail-hljs-attribute" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">transform</span>: <span class="gmail-hljs-built_in" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">translateY</span>(<span class="gmail-hljs-number" style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">0</span>);
    }
</code></pre><p style="margin:0px;padding:0px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;box-sizing:inherit;clear:both;color:rgb(36,39,41)">Within the <strong style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">CSS</strong> configuration the navbar was hidden forever and it is not expanding on mouse over. Could anyone point me to the reason the navbar has been hidden forever and how I could make it expand on mouse over? How could I achieve the same goal by just using <strong style="margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;box-sizing:inherit">BootStrap4 class=collapse</strong>?</p><p style="margin:0px;padding:0px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;box-sizing:inherit;clear:both;color:rgb(36,39,41)"><br></p><p style="margin:0px;padding:0px;border:0px;font-variant-numeric:inherit;font-variant-east-asian:inherit;font-stretch:inherit;line-height:inherit;font-family:-apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;font-size:15px;vertical-align:baseline;box-sizing:inherit;clear:both;color:rgb(36,39,41)">I appreciated your time in advance<br><br>Julierme</p></div>