Image above sub-nav

[katymartin]

I'm using the Going Green theme and would like to insert a small (33px tall) image BETWEEN the secondary menu nav and the drop-down sub-nav box.

The effect I'm trying to replicate is the torn paper image as seen here:  http://www.lauracandler.com/blog/  (notice the torn paper with blue pushpin image above the drop-down)

The dev site I'm looking to add this feature to is: http://netstorepro.com/partners/
Any help is appreciated.

http://netstorepro.com/partners/

[Brad Dalton]

I don't understand the location. Can you please take a screenshot and point an arrow to it.

---

Tutorials for StudioPress Themes.

[katymartin]

Hi Brad... sure thing.  Thanks for taking a look.

Here's an example of the effect I'm trying to replicate:  http://netstorepro.com/partners/wp-content/uploads/2013/04/Example.jpg

* Notice the torn paper image with blue pushpin above the drop-down sub-menu.

Here's a screen shot of my site with an arrow to where I'd like to see my image inserted: http://netstorepro.com/partners/wp-content/uploads/2013/04/Example_How.jpg

[Brad Dalton]

Not sure how to do that to be honest. I do know how to display an image below the nav menu but not in the dropdown unless you use a menu like Mega Menu http://wordpress.org/extend/plugins/jquery-mega-menu/

---

Tutorials for StudioPress Themes.

[katymartin]

The plugin looks cool but doesn't seem to do what I need.  I'm wondering if the "drop-down" section (ie.  sub-nav) has a css class of it's own?  Perhaps I can give it a background image?

[Brad Dalton]

Yeah. All menu items have an i.d and you can also add a class to them as well.

Go to Screen Options > Show advanced menu properties > CSS Classes and add a custom class there

---

Tutorials for StudioPress Themes.

[katymartin]

Thanks Brad... your notes above jogged my memory on that one.  It inspired me to look further at how I could use the CSS classes of the menu to add an image.

For future reference, here's what I did to achieve the look I was after.  A bit of a hack, especially if the client moves the menu order around, but it works for now:

 

.boardmembers:before, .communitybased:before, .seniorpartner:before, .newsletters:before, .events:before {
display: block;
content: "";
width: 220px;
height: 36px;
background: transparent url("http://netstorepro.com/partners/wp-content/uploads/2013/04/nav_tear_top-220.png") no-repeat;
}

[Brad Dalton]

Thanks for posting this solution Katy.

---

Tutorials for StudioPress Themes.

[Author]

Posts