Search code examples
htmlcssz-indexbox-shadow

box-shadow on circle element

I am trying to implement box-shadow on my circle element to match it with whole navbar, but I want to make it only on bottom of circle. I was trying to change z-index and hide it under that navbar but it didnt work. Here is the photo

How can i do it?

Here's the css and html code:

nav.navbar {
    font-family: var(--montserrat);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 60px;
    background-color: white;
    box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.36);
    z-index: 10;
}

nav.navbar div.navbar-element {
    display: flex;
    height: 100%;
    width: 100%;
}
nav.navbar > div.navbar-element div.logo-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: auto;
    background-color: white;
    position: relative;
    margin-top: -10px;
}

nav.navbar > div.navbar-element div.logo-wrapper img {
    width: 80%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
<nav class="navbar">
    <div class="navbar-element">
        <div class="site-part">O nas</div>
        <div class="site-part">Oferta</div>
        <div class="logo">
            <div class="logo-wrapper">
                <img src="./../images/logo.jpg" alt="logo">
            </div>
        </div>
        <div class="site-part">Realizacje</div>
        <div class="site-part">Kontakt</div>
    </div>
</nav>
Solution

  • I would recommend just making a div outside of the navbar, adding a box-shadow to that div, setting the border-radius to make the div a circle, and then positioning it underneath the logo. As an example: (I hard-coded some stuff just to throw this together quickly.)

    .box-shadow {
     width: 75px;
     height: 75px;
     border-radius: 50%;
     box-shadow: 0 15px 8px 8px rgba(0,0,0,0.36);
     position: absolute;
     top: 4%;
     left: 9%;
     z-index: -1;
     transform: translateX(-50%) translateY(-60%);
  }

    The wonderful thing about CSS is that you can fiddle to your heart's content, until it is exactly as you'd like it.