Shadow not lining up with drop-down box on nav bar menu (Pilcrow Theme)

  • Unknown's avatar
    holleymaher · Member ·

    Hi…

    So I’ve been editing the CSS of a blog I’m working on designing (www.healthyandhappyhour.com/) and have run into a problem. I’m working with the Pilcrow theme, and I didn’t like how the nav bar/menu items were aligned to the left, I wanted them centered. So, I adjusted them so that they were “padding-left:100px”. I also adjusted the drop-down menu box for the “H&H Picks” tab so that it lined up (left:-100px). However, the drop shadow on that drop down box is still way too far to the left, and I can’t figure out how to adjust that in the CSS coding.

    Here’s what it looks like now:

    …

    #nav li {
    float:left;
    position:relative;
    }

    #nav a {
    color:#765d58;
    display:block;
    line-height:42px;
    letter-spacing:.3em;
    text-decoration:none;
    text-transform:uppercase;
    padding:0 16px;
    }

    #nav ul ul {
    box-shadow:0 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
    display:none;
    float:left;
    position:absolute;
    top:42px;
    padding-left:-100px;
    width:180px;
    z-index:99999;
    }

    …

    Any ideas?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    devblog · Member ·

    First, just FYI, it’s not a good idea to copy the entire CSS in the CSS Editor because you’re just duplicating the code that has already been written by the theme’s designer. Only your changes/additions to the CSS should be in the CSS Editor. For more info, I’d recommend you reading this:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

    Now, this should do what you want:

    Change the values of the “left” and “width” properties of your “#nav ul ul” selector to this:

    left:0;
width:160px;

    Add the following selectors:

    #nav ul ul li {left: -100px;width: 260px;}

#nav ul ul li a {width: 229px;}

    That’s it. HTH

  • Unknown's avatar
    holleymaher · Member ·

    Thanks very much! Never would have figured that out.

    I had no idea you weren’t supposed to include the entire CSS when editing. I learned how to use CSS by messing around with the old MySpace, and on there, the entire CSS had to be included.

    Thanks for the tip!

  • Unknown's avatar
    bhutanesecricket · Member ·

    Very good tips.
    Thank you
    [MOD EDIT – Link removed.]

  • The topic ‘Shadow not lining up with drop-down box on nav bar menu (Pilcrow Theme)’ is closed to new replies.