I'm currently working on my own website and I've run into a roadblock with the menu design. Here's how it looks right now.
https://i.sstatic.net/8kINJ.png
Everything is looking great except for one issue! I'm attempting to add a box-shadow effect to the "Blog" menu item, and upon zooming in, you'll notice the box shadow on the left side and on top of "Blog," but it doesn't appear on the right side. It seems like there may be an overlap with the "About" section.
The box-shadow code is correctly written as follows:
box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-moz-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
Here is the HTML snippet related to this issue:
footer{
bottom: 0;
// height: 100px;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
nav.main{}
nav.main ul{
list-style-type: none;
margin-bottom: 0;
padding-left: 0;
}
nav.main ul li{
display: inline-block;
float: left;
line-height: 1;
margin-top: 1.5rem;
text-align: center;
width: 20%;
}
nav.main ul li span{
display: block;
font-size: 5rem;
margin-bottom: 1rem;
}
nav.main ul li a{
color: #2D2D2D;
display: block;
font-size: 2rem;
padding: 2rem;
}
nav.main ul li a.highlight{
background-color: #ACFF32;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-moz-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
border-radius: 5px 5px 0 0;
margin-top: -1.5rem;
padding-top: 3.5rem;
}
}<footer>
<nav class="main">
<ul>
<li style="background: #33A2FF;">
<a href="#">
<span aria-hidden="true" data-icon="" class="icon icon-briefcase"></span>
PROJECTS
</a>
</li>
<li style="background: #22E886;">
<a href="#">
<span aria-hidden="true" data-icon="" class="icon icon-bucket"></span>
DESIGNS
</a>
</li>
<li style="background: #ACFF32;">
<a href="#" class="highlight">
<span aria-hidden="true" data-icon="" class="icon icon-pen"></span>
BLOG
</a>
</li>
<li style="background: #E8BA22;">
<a href="#">
<span aria-hidden="true" data-icon="" class="icon icon-brain"></span>
ABOUT
</a>
</li>
<li style="background: #FF6F25;">
<a href="#">
<span aria-hidden="true" data-icon="" class="icon icon-mailbox"></span>
CONTACT
</a>
</li>
</ul>
</nav>
</footer>Furthermore, I noticed that if I set a background for the nav element and remove all colors from the menu items, the box shadow functions properly. Thus, defining colors separately seems to be causing the issue.
Thank you for your assistance.