WordPress.com

1. holleymaher
   Member
   Apr 12, 2011, 6:53 PM

   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 holleymaher.wordpress.com.

2. devblog
   Member
   Apr 13, 2011, 2:20 PM

   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

3. holleymaher
   Member
   Apr 13, 2011, 2:38 PM

   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!

4. bhutanesecricket
   Member
   Apr 13, 2011, 2:48 PM

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

Topic Closed

This topic has been closed to new replies.