Member Avatar for webdi

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!

  • 2 Contributors
  • 2 Replies
  • 239 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by webdi
Member Avatar for Dandello

Define the height and width of your li element instead.

Member Avatar for webdi

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.