CODEWITHSUNDEEP
htmlcss
Leon Kunštek
Leon Kunštek

Reputation: 563

Box-shadow not showing

For some unknown reason my box-shadow isn't showing.
I have been working on this for a full day and couldn't find a solution. I removed the background image and was still unable to see the shadow. I also tried with -webkit, -moz and z-index but no matter what I did, I still couldn't see the shadow.

The HTML:

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Unknown</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
      <link rel="stylesheet" type="text/css" href="css/basic.css">
      <link rel="stylesheet" type="text/css" href="css/navbar.css">
      <link rel="stylesheet" type="text/css" href="css/font.css">
      <script type="text/javascript" src="js/navbar.js"></script>
   </head>
 <body>  
 <font face ="Alex Brush" size="5">
  <div id="container">
    <div id="paper">
     <font color="#fff">
      <a href="index.html">                                                
        <div id="title"></div>
          <p id="asd">Unknown</p>
      </a>
     </font>
      <div id="navbar">
        <font color="black">
            <div class="topnav" id="myTopnav">
              <div id="sub-nav">
               <div id="mini-nav-head">
                 <a id="responds" href="#home" class="active">Home</a>
                 <a class="icon" onclick="change()"><i class="fa fa-bars"></i></a>
               </div>
               <a id="respondy" href="#contact">Bouquets</a>
               <a id="respond" href="#about">Weddings</a>
               <a id="respond" href="#about">About us</a>
               <a id="responde" href="mail/contact.php">Contact us</a>         
              </div>
            </div>
        </font>
      </div>
    </div> 
  </div>
 </body>
</html>

The CSS (navbar.css):

body {
  margin: 0;
  font-family: Arial, Helvetica;
}

#sub-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav {
  border-radius: 4px;
  overflow: hidden;
  background-color: white;
  width: auto;
  margin-top: 18%;
}

.topnav a {
  height: auto;
  width: auto;
  padding: 10px;
  float: left;
  display: block;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 100%;
}

#respond, #responds, #respondy, #responde {
  padding: 14px 3.5%;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

.icon {
  position: relative;
  top: 3.5px;
  right: 1.8%;
  padding: 0;
}

@media screen and (max-width: 865px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  #respond {
    border-bottom: 1px solid black;
    /*background-color: yellow;*/
  }
  #responde {
    box-shadow: 10px 10px grey;
    position: relative;
    z-index: 10;
  }
  #respondy {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    /*background-color: yellow;*/
  }
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    top: 3.5px;
    right: 1.8%;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #sub-nav {
    display: block;
  }
  .topnav a:hover {
    background-color: #fff;
    color: black;
  }
}

The other CSS (basic.css):

body, html { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0;
}

body { 
     background: url(../img/island.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
   }

#container {
    margin: 0 auto;
    width: 50%;                            /* Dužina */
    height: 100%;                          /* Visina */
    border-radius: 0px;                    /* Zakrivljenost rubova */
    background-color: white;               /* Pozadinska boja */
    position: relative;                    /* Relativna pozicija */
    z-index: 1;                            /* z-pozicija */
}

#container #paper {  
    margin-top: 0px;
    margin-left: auto;                     /* Lijeva i desna margina se automatski rasporede pa je element na sredini */
    margin-right: auto;                    /* Margine ostavljaju prostora izvana */
    width: auto;                           /* Dužina */
    height: 25%;                           /* Visina */
    border-radius: 0px;                    /* Zakrivljenost rubova */
    border: none;                          /* Debljina, veličina i boja margine */
    background: url(../img/bouquet.jpg);   /* Pozadinska slika */
    no-repeat center 0;
    max-width: 100%;
    position: relative;                    /* Relativna pozicija */
    padding: 1%;                           /* Padding ostavlj prostor unutra , ali oduzima od visine i dužine */
    padding-right: 1.05%;
    z-index: 2;
    
}

#paper{
   top: 0px;
}

#title {
    top: 0%;
    position: absolute;
    left: 3.2%;
}

#asd{
    position: absolute;
    top: -4.5%;
    left: 4.9%;
}

#title {
    padding-top: 0%;
    width: 65px;
    height: 18%;
    padding-left: 2%;
    padding-right: 2%;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    word-wrap: all;
    background-color: #fff; 
    display: inline-block;
    position: absolute;
}

a:link, a:visited, a:hover, a:active {
    color: black;
}

@media screen and (max-width: 1210px) {
  #container{  
    width: 70%;
  }
}

Any suggestions that could help me fix the problem?

Upvotes: 2

Views: 11926

Answers (2)

Leon Kunštek
Leon Kunštek

Reputation: 563

The problem was that I had overflow: hidden; in .topnav which prevented the shadow from showing, and after I replaced it with overflow: visible; the shadow was visible.

Upvotes: 6

nhk96
nhk96

Reputation: 120

On which screen size you're working on?

As what I observed from the code, the box-shadow will only appear when the screen has a max width of 865px.

@media screen and (max-width: 865px) {
  #responde {
    box-shadow: 10px 10px grey;
    position: relative;
    z-index: 10;
  }
}

If you wish to have the box shadow appear no matter which screen size, you should declare it outside of 

#responde{
   box-shadow: 10px 10px grey;
   position: relative;
   z-index: 10;
}

@media screen and (max-width:865px){

}

Upvotes: 0

Related Questions