Question 11361 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to animate and shrink bootstrap navbar on scroll? – Jquery

<form id="form1" runat="server">
        
            <div>
                <nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong fixed-top" id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px);">
                    <a class="navbar-brand" href="#"> <img src="imgs/vmc_logo.png" height="50" /></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">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="homepage.aspx">Home</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

My navbar not shrinking (Sticky-top will not work good as there is logo in it)

Only found solutions on sticky-top and jqquery

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <script src="Jquery/js/jquery-3.6.0.slim.js"></script>
<script>
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop()<=35){
                $(".navscroll").removeClass('scroll_navbar')
                $("nav").css("padding", "20px");
            }
            else{
                $(".navscroll").addClass('scroll_navbar')
                $("nav").css("padding", "0px");
            }
        })
    })
</script>

    used this jquery to change directly inline css. idk why asp.net web app not applying external css attribute specifically Jquery one


  2. 0 
    .navbar {
  height: 80px;
  position: fixed;
  top: 0;
  width: 100%;
}

@media (min-width: 992px) {
  .navbar {
    height: 60px;
  }
}

    The above provided CSS code sets the height to 80px, and once the user scrolls past 992px it’s going to shrink to 60px. You could try that, or using JS/JQuery.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search