How to remove gap between box-shadow and div, when div is small because of scaling due to height: xvh

Question

When I make the website really thin, there will be a gap between the box-shadow, and the div with class "navbar" that has the shadow applied.

The blue is the navbar, and the back is the shadow. There is a gap between them, and that gap disappears once you make have a bigger height (Scale browser in Y-direction).

.navbar
{
    height: 10vh;
    background-color: blue;
    text-align: left;
    box-shadow: 10px 10px;
    //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    z-index:999;
}

Answer 1

To fix the issue of the gap between the box-shadow and the navbar when the website is thin, you can modify the box-shadow property by specifying the spread radius and color. Here's an updated version of your code:

.navbar {
     height: 10vh;
     background-color: blue;
     text-align: left;
     box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); /* Adjust the spread 
     radius and color */
     position: relative;
     z-index: 999;
    }

In the box-shadow property, the values are defined as follows: 0 0 10px 2px rgba(0, 0, 0, 0.2). The first two zeros represent the horizontal and vertical offsets, which are set to 0 in this case. The 10px specifies the blur radius, which determines the size of the shadow. The 2px is the spread radius, which expands the size of the shadow. Finally, rgba(0, 0, 0, 0.2) defines the color and transparency of the shadow.

Adjust the values of the spread radius (2px) and the color (rgba(0, 0, 0, 0.2)) to your liking. This should help eliminate the gap between the box-shadow and the navbar when the website is thin.