Place image next to nav bar

[trbdesign]

Hi,

I'm trying to duplicate a nav bar that has small graphics on either end to simulate a ribbon and I'd like to know how (and where) to insert a div on each end so that I can use the CSS background command to insert the ribbon pieces on either end. I hope this makes sense. I don't see a place to upload a picture of what I'm talking about.

Here's an example:

http://www.ascseniorcare.com/

I'm trying to figure out how to set up the ends of the ribbon.

Any ideas?

Thanks in Advance,

Toni

http://asc.ignitrodev.com/blog/

[Brad Dalton]

Here's some CSS code i have tested locally which you can use and simply change the class. http://wpsites.net/web-design/css-code-to-add-a-ribbon-background-to-any-element/

---

Tutorials for StudioPress Themes.

[trbdesign]

Thanks for your reply. Sorry to be so dense, but where would I find the class to change?

I tried substituting .nav and .wrap for .sidebar and .widget-title, but no luck. Also, should I be putting anything in content: "";?

Thanks,

Toni

[Brad Dalton]

Try firebug but i think it would be something like .nav-primary.

You will need to remove the .sidebar .widget classes and replace them with the nav class.

Example:

.nav-primary:before 
.nav-primary:after 
.nav-primary

If you get stuck, you are welcome to contact me for further assistance http://wpsites.net/contact/

---

Tutorials for StudioPress Themes.

[Genesis Developer]

Add this code in your style.css file

#nav {
    position: relative;
    display: inline-block;
    width: 100%;
}
#nav:before {
    background: url("http://www.ascseniorcare.com/themes/lm360_am_sr_v1/assets/css_images/senior-left-wing.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 54px;
    left: -16px;
    position: absolute;
    top: -4px;
    width: 16px;
}
#nav:after{
    background: url("http://www.ascseniorcare.com/themes/lm360_am_sr_v1/assets/css_images/senior-right-wing.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: "";
    display: block;
    height: 54px;
    right: -16px;
    position: absolute;
    top: -4px;
    width: 16px;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[trbdesign]

Thanks, but that didn't help. I think I need to make a couple of divs to hold the images, but I don't know how (or where to put them).

[trbdesign]

I spoke too soon. I didn't include the # for the first nav. It worked like a charm!!! Thank you, thank you!!

Toni

[trbdesign]

Do you have any idea why it doesn't work for my footer? I copied everything from #nav, but no luck.

Toni

[Genesis Developer]

Site is giving the fatal error now. SO I can't check it now

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Brad Dalton]

I would use this instead:

background-image: url('images/senior-right-wing.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);

And add the images to your child themes images folder.

---

Tutorials for StudioPress Themes.

[Author]

Posts