Q:

Making bootstrap navbar sticky only when navbar-collapse show

I want to make my navbar into a fixed position only if the collapsed menu is shown. It seems I can only make it permanently fixed regardless of the collapse function trigger, which is not what I want. 
This is what I have
<nav class="navbar navbar-expand-lg navbar-light bg-white align-items-stretch">
  <a href="{{ url('/') }}" class="navbar-brand">
    <img class="navbar-logo img-fluid" src="{{ asset('img/generic.png') }}">
  </a>
  <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar_collapse" aria-expanded="false">
    <span class="navbar-toggler-icon "></span>
  </button>
  <div class="navbar-collapse collapse align-items-stretch bg-white" id="navbar_collapse">
  <!--collapse menu code-->
  </div>
</nav>

and in my css file to specify the navbar only on device version
    @media (max-width: 992px) {
        .navbar-fix  {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
        }
    }

and my script

$( document ).ready(function() {
    $('.navbar').click(function(){
        $('.navbar.navbar-fixed').removeClass('navbar-fixed');
        $(this).addClass('navbar-fixed');
        console.log( "nav fix" );
    });
});

Which doesn't load it back to relative position when the collapse is hidden. And how can I specify so it's only fixed when I click on the toggler?

A:

It's a little difficult to discern exactly what you are asking, but I'll give it a shot.
So, when you say... 

I want to make my navbar into a fixed position only if the collapsed menu is shown. It seems I can only make it permanently fixed regardless of the collapse function trigger.

It seems as though you are having difficulty changing the navbar position attribute at the lg(992px) breakpoint. Without more content on the page, it's difficult to determine what's actually happening upon hitting the breakpoint. So, I inserted your snippet into my IDE, added some filler text and played around with Chrome's dev tools to see what was happening.
Let's breakdown the components at work here... 
For navbar, the class "navbar-expand-lg" is saying to expand/show the navbar when the screen is 992px or more. So the collapsed version will display only when the size is less that 992px. 
Now, your css snippet has a media query for the lg breakpoint(992px). Therefore, the styles inside @media codeblock will apply when the screen is 992px or less. Since the position attribute is being set to "fixed" inside this @media query, the navbar is being set to fixed when the screen is 992px or less.
Putting it all together, you 

want to make my navbar into a fixed position only if the collapsed menu is shown.

Your collapsed menu is shown when screen size is less than 992px. Your @media query is setting the navbar to fixed when the screen size is less than 992px. What may fix your issue is setting the navbar position attribute specifically for when the screen is bigger than 992px. 
If I didn't answer the right question, or if you were trying to remove the navbar completely except when collapsed is showing, look into the display setting to remove it at the lg breakpoint. 
Hope this helps!

