954,595 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Drupal with Zen, advice needed on styling background for active navigation links

Hey,

I would welcome some advice here. I'm developing my first Drupal site and I am using Zen as my starter theme and creating a sub-theme.

I've got my navigation set up in the second (right) sidebar. I would like all of the inactive navigation links to have the same background and the active navigation link to have a different background. It's the active background that I am having trouble with.

The site can be seen here http://tandemlifecoaching.com .

I'm close, but not quite there. I've edited the html-reset.css document with the following.

ul.menu li.leaf a.active-trail {
background-image:url('http://tandemlifecoaching.com/sites/all/themes/zen_custom/images/active-nav.gif');
margin-left:-114px; padding:27px 100px 29px 50px;
}


I'm unable to define a size for my background image behind my navigation text link. I've tried height and width defined by pixels and height and width defined by percent. I've tried background-size, but all browsers aren't playing nicely with that property. The padding that I added is not ideal as this shows the background width dependent upon the size of my actual text link, so the shorter links show less of the button than the longer links. I'm sure there's an easy solution out there, I just haven't found it yet.

I'd welcome any suggestions and thank you in advance for your help!

webdi
Newbie Poster
14 posts since Jul 2009
Reputation Points: 10
Solved Threads: 0
 

Define the height and width of your li element instead.

Dandello
Posting Whiz in Training
263 posts since May 2010
Reputation Points: 28
Solved Threads: 23
 
Define the height and width of your li element instead.

Ah yes, of course! Works perfectly. Thanks for your help. Sometimes after looking at something so long, we don't see clearly!

webdi
Newbie Poster
14 posts since Jul 2009
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: