Community Forums › Forums › Archived Forums › Design Tips and Tricks › Place image next to nav bar
- This topic has 9 replies, 3 voices, and was last updated 10 years, 1 month ago by Brad Dalton.
-
AuthorPosts
-
March 18, 2014 at 4:19 am #95425trbdesignMember
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:
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/March 18, 2014 at 5:30 am #95428Brad DaltonParticipantHere'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/
March 18, 2014 at 7:33 am #95457trbdesignMemberThanks 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
March 18, 2014 at 8:27 am #95464Brad DaltonParticipantTry 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/
March 18, 2014 at 12:44 pm #95524Genesis DeveloperMemberAdd 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; }
March 18, 2014 at 1:19 pm #95534trbdesignMemberThanks, 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).
March 18, 2014 at 1:21 pm #95535trbdesignMemberI spoke too soon. I didn't include the # for the first nav. It worked like a charm!!! Thank you, thank you!!
Toni
March 18, 2014 at 2:40 pm #95551trbdesignMemberDo you have any idea why it doesn't work for my footer? I copied everything from #nav, but no luck.
Toni
March 18, 2014 at 8:29 pm #95590Genesis DeveloperMemberSite is giving the fatal error now. SO I can't check it now
March 19, 2014 at 7:55 am #95667Brad DaltonParticipantI 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.