1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Shadows for navbar?

Discussion in 'Styling and Customization Questions' started by Laurentius, Feb 15, 2012.

  1. Laurentius

    Laurentius Active Member

    I have successfully added a shadow around the edges of my website with this code:
    #content .pageContent {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);}

    but now the problem is that I would like this shadow to continue around the outer side of the navbar. If I implement this in the navigation.css template, I get a shadow all around the navigation, also under it, which I don't want.

    Any ideas how to fix this?
  2. steel_curtain

    steel_curtain Well-Known Member

    Can you post a link to your site?
  3. Laurentius

    Laurentius Active Member

  4. steel_curtain

    steel_curtain Well-Known Member

    For the navbar this should be a close match to what you posted above.
    #navigation .pageContent {
    box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.15), -3px 0px 3px rgba(0, 0, 0, 0.15);
    Or you could try a light shadow along the whole pageWidth including the header area with this...
    .pageWidth {
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1), -1px 0 3px rgba(0, 0, 0, 0.1);
  5. Laurentius

    Laurentius Active Member

    Actually adding your first code worked the best, then I just have the problem of implementing the shadow to the header without giving shadow to the top of the navbar. The second option gave shadow to the top and the bottom of the navbar, which I don't want. The picture below shows exactly what I would like to achieve.

    Skärmavbild 2012-02-16 kl. 09.10.25.png

    Skärmavbild 2012-02-16 kl. 09.10.41.png

    On the last picture I would like the shadow to curve around and be on the bottom of the footer.

    Thank you very much for your help steel_curtain

Share This Page