Navigation items/separate image background

Susan MacPhee's picture

Susan MacPhee
July 10, 2011
2:13pm

Hi, I was able to achieve a look of background images on separate navigation items but I cheated by using one image. http://pibeachcoma.drupalgardens.com/.

this is not ideal as it does not expand/contract properly on browser resize also, I'd like the images to have rollover effect too. Is there a way to select CSS separately for each nav item to add style separately?

Susan

Status: Resolved

Comments

Gardener
Dave Murphy July 10, 2011
7:52pm

Susan,

The way DG sets up nav menus is, regardless of the number of menu items, the first list item is named as a class of first leaf. The middle list items are named  as leaf. The last list item is named last leaf. If you had three items in the list, you could target those and style them. The problem you would run into is the middle items. All of them with a class of just leaf would not allow for different backgounds for those items. 

I haven't tried this yet, but if you feel adventurous, you could set the current menu to display:none. Or even better, since the main menu is a block region, you could disable it all together. From there, you could create your own custom menu that could have the rollovers you are wanting for the site. 

Here's some links to help you out and get the ideas flowing:

Link 1

Link 2

Link 3

Link 4

Best regards,

Dave

Susan MacPhee July 11, 2011
2:44pm

Thanks Dave, That all makes sense. For now my one image background works for this use case and it's good to know what I need to do to take it further.

Best, Susan

Moderator
heather July 12, 2011
5:59am

There's a related issue, and I added your +1!

 

As a Gardens user I would like unique menu IDs or classes on li - AN-17832

Heather James
Gardens Advisory Team | @learningdrupal

Moderator
heather July 12, 2011
5:59am

There's a related issue, and I added your +1!

 

As a Gardens user I would like unique menu IDs or classes on li - AN-17832

Heather James
Gardens Advisory Team | @learningdrupal

Moderator
heather July 12, 2011
5:59am

There's a related issue, and I added your +1!

 

As a Gardens user I would like unique menu IDs or classes on li - AN-17832

Heather James
Gardens Advisory Team | @learningdrupal

Susan MacPhee July 12, 2011
8:01pm

Thanks Heather! he/she put it nicely

Moderator
stacywray January 6, 2012
12:44am

Hi all,

The style of each menu item can now be changed in the ThemeBuilder. Unique identifiers have been added to all Drupal Gardens menu items so they can be individually customized. You can also use image sprites as needed. 

For more information, please see our most recent What's New Announcement for a full list of feature enhancements and bug fixes.

Thanks!

 

Best regards, 

Stacy Wray | Acquia Client Solutions Engineer
DG tip: Replace your site's default contact form. bit.ly/1bKf1Py

Susan MacPhee January 24, 2012
10:11am

Very excited about that! Thanks Drupal Gardens.

This topic has been closed to further comments.

Feedback