Any way to remove box shadow from just the top?

Posted on 2013-09-30
Medium Priority
Last Modified: 2013-09-30
Hi I've got a box-shadow on an element and I'd like to have the top of the shadow removed.
I managed to do it on the contact tab at the top right. But having trouble removing it from the primary navigation dropdown menu. I think it's because the dropdown ul is absolute positioned and needs a high z-index so I'm not able to hide the top shadow under anything.

I want it to appear as if the dropdown is dropping down below the header.


Does anyone have a workaround?

Question by:Alicia St Rose
  • 2
  • 2
LVL 58

Accepted Solution

Gary earned 1600 total points
ID: 39535219
So remove the top shadow from the dropdown?

#menu-primary ul ul {        styles.css line 2285
box-shadow: 0 4px 4px 1px #531A1A;

Author Comment

by:Alicia St Rose
ID: 39535257
that was ridiculously easy!
I was looking to have the shadow from the header drop over the top, but I see that is a z-index issue that would take some wrangling and it's not worth it.
Thanks for the schoolin!
LVL 58

Expert Comment

ID: 39535280
You could but you wouldn't notice it with the dark background of the dropdown menu.

Author Comment

by:Alicia St Rose
ID: 39535338
I'm going to add a shadow to the background image. Yeah, that's the way to do it..
Trust me, I'd notice. That is the bane of my freelancing existence, concentrating on the details that no one else would notice.

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

619 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question