CODEWITHSUNDEEP
htmlcss
Jack Sewell
Jack Sewell

Reputation: 109

Box shadow not taking affect?

So on my website I have a topmenu then my logo below that. I'd like to apply a box-shadow below my logo but I cannot get it to apply.

I'd like a shadow underneath the logo part so it flows better with my carousel. 

.topmenu {
  background: #262626;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  margin: 0;
  height: 49px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.topmenu .mymenu li a {
  color: #ffffff;
  display: block;
  height: 49px;
  padding: 15px 10px 0 10px;
  margin: 0;
  text-decoration: none;
  font-size: 14px;
}
.topmenu .mymenu li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
user agent stylesheetli {
  display: list-item;
  text-align: -webkit-match-parent;
}
.topmenu .mymenu {
  outline: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}
#logo {
  background: #333333;
  padding: 70px 25px 20px 15px;
}
<a name="top" id="top"></a>
<div id="header">
  <div class="topmenu">

    <ul class="mymenu">
      <li><a href="http://www.mythic-kingdom.org" class="home"><span class="octicon octicon-home"></span> Home</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/index.php" class="home"><span class="octicon octicon-comment-discussion"></span> Forum</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/blog.html" class="home"><span class="octicon octicon-book"></span> Blog</a>
      </li>

      <li><a href="#" class="home"><span class="octicon octicon-file-text"></span> Store</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/misc.php?action=help" class="help"><span class="octicon octicon-question"></span> Help</a>
      </li>
    </ul>



  </div>
  <div id="logo">

    <a id="logo-image" href="http://www.mythic-kingdom.org/forum/index.php">
      <img src="http://www.mythic-kingdom.org/forum/images/MythicKingdom/Line-Logo-myBB.png" alt="Mythic Kingdom :: Forum" title="Mythic Kingdom :: Forum" />
    </a>
  </div>
</div>

Upvotes: 0

Views: 47

Answers (1)

rkd
rkd

Reputation: 714

Your question is a bit unclear — can you be more specific by "a shadow underneath the logo part"?

I added some debug shadows to your code in case that helps. I made the shadows use bright colors for visibility, and I added a new rule to apply a shadow to the logo itself in case that's what you meant.

If you want a shadow "underneath the logo part" in the sense of a shadow behind the letters themselves, that most likely needs to be done in Photoshop or wherever the logo is created. CSS Box-shadows are useful for applying a shadow to an element/container or to HTML text, but not necessarily intended to add pixel-by-pixel shadows within PNG content.

.topmenu {
  background: #262626;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  margin: 0;
  height: 49px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(255, 0, 0, 1);
  /* Debug Shadow */
}
.topmenu .mymenu li a {
  color: #ffffff;
  display: block;
  height: 49px;
  padding: 15px 10px 0 10px;
  margin: 0;
  text-decoration: none;
  font-size: 14px;
}
.topmenu .mymenu li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
user agent stylesheetli {
  display: list-item;
  text-align: -webkit-match-parent;
}
.topmenu .mymenu {
  outline: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}
#logo {
  background: #333333;
  padding: 70px 25px 20px 15px;
  box-shadow: 0 3px 3px rgba(0, 255, 0, 1);
  /* Debug Shadow */
}
#logo img {
  box-shadow: 0 3px 3px rgba(255, 0, 255, 1);
  /* Debug Shadow */
}
<a name="top" id="top"></a>
<div id="header">
  <div class="topmenu">

    <ul class="mymenu">
      <li><a href="http://www.mythic-kingdom.org" class="home"><span class="octicon octicon-home"></span> Home</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/index.php" class="home"><span class="octicon octicon-comment-discussion"></span> Forum</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/blog.html" class="home"><span class="octicon octicon-book"></span> Blog</a>
      </li>

      <li><a href="#" class="home"><span class="octicon octicon-file-text"></span> Store</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/misc.php?action=help" class="help"><span class="octicon octicon-question"></span> Help</a>
      </li>
    </ul>



  </div>
  <div id="logo">

    <a id="logo-image" href="http://www.mythic-kingdom.org/forum/index.php">
      <img src="http://www.mythic-kingdom.org/forum/images/MythicKingdom/Line-Logo-myBB.png" alt="Mythic Kingdom :: Forum" title="Mythic Kingdom :: Forum" />
    </a>
  </div>
</div>

Upvotes: 2

Related Questions