How do I get a box shadow to appear under different elements-CodePudding

I am attempting to get a css box shadow from a circular to appear underneath a nav bar that appears under the image itself. At the moment I can get the image to create a shadow that appears on top of the nav bar but I want it to appear that it is all one object.

I've tried using :before on the class ".logo" and putting the shadow at a different z-index but it just makes the shadow disappear. I'm rather new to web stuff (as well as stack overflow) so any help will be appreciated.

This is the css I'm using and the issue is with the logo class

html{
    overflow-y: scroll;
}
body {
    font-family: "Arial", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #DCDCDC;
    background-color: #222035;
    margin: 0px;
}
.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.logo {
    position: relative;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}
.logo:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius:100%;
    box-shadow: 0 2vh 5vh #000000;
}
.topnav {
    box-shadow: 0px 2vh 5vh #000000;
    width: 100%;
    height: 15vh;
    background-color: #222035;
}
 
header {
    padding: 170px;
}

And the rest of the HTML

<!DOCTYPE html>
<html lang="en-UK">
    <head>
        <title>WOW</title>
        <link rel="icon" href="icon.png">
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>

        <nav class="topnav">
        <img class = "logo" src="icon.png"></nav>
        
    </body>

CodePudding user response：

You may use filter: filter:drop-shadow(0px 2vh 5vh #000000); on the nav itself instead a box-shadow.

drop-shadow() follows the shape of the container while box-shadow follows the original shape of the container (rectangle).

see: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

example

html {
  overflow-y: scroll;
}

body {
  font-family: "Arial", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #DCDCDC;
  background-color: #222035;
  margin: 0px;
}

.centered {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.logo {
  position: relative;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

.logo:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 100%;
}

.topnav {
  filter: drop-shadow(0px 3px 5px #fff);/* make it obvious for the demo */
  width: 100%;
  height: 15vh;
  background-color: #222035;
}

header {
  padding: 170px;
}

<nav class="topnav">
  <img class="logo" src="https://i.ibb.co/1bkLMQt/Suit-Yourself-logo-2.png">
</nav>