How can i make a shadow under the navbar?-CodePudding

I am trying to make this https://www.hackerrank.com/ front page using Html and CSS. But their nav bar has a very nice shadow when it slides down. I don't know how to make it, please need some help

CodePudding user response：

use

--tw-shadow-color: #000;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

or use boxshadow property in css

CodePudding user response：

for this scrolling effect, you need to use javascript for adding or removing classes on page scroll and add the basis of the classes you can add any CSS you want to add

for example, your HTML is like

<!-- no scroll -->
<nav >
    <!-- code -->
</nav>

<!-- after scrolling -->
<nav >
    <!-- code -->
</nav>

or add some CSS like

 .nav-sticky {
        background-color: #ffffff ;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    }

use this javascript code to add or remove class

Note: Make sure you should include the javascript library

! function($) {
    "use strict";
    // Menu
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $(".sticky").addClass("nav-sticky");
        } else {
            $(".sticky").removeClass("nav-sticky");
        }
    });
}(jQuery)