Place image next to nav bar

Community Forums Forums Design Tips and Tricks Place image next to nav bar

This topic is: not resolved

Tagged: , ,

This topic contains 9 replies, has 3 voices, and was last updated by  braddalton 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #95425

    trbdesign
    Participant
    Post count: 15

    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/
    #95428

    braddalton
    Participant
    Post count: 9782

    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/


    #95457

    trbdesign
    Participant
    Post count: 15

    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

    #95464

    braddalton
    Participant
    Post count: 9782

    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:
    [css]
    .nav-primary:before
    .nav-primary:after
    .nav-primary
    [/css]

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


    #95524

    genwrock
    Member
    Post count: 586

    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;
    }

    My Genesis Child Themes Work | Please Follow Me on Twitter If I’ve helped.

    #95534

    trbdesign
    Participant
    Post count: 15

    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).

    #95535

    trbdesign
    Participant
    Post count: 15

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

    Toni

    #95551

    trbdesign
    Participant
    Post count: 15

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

    Toni

    #95590

    genwrock
    Member
    Post count: 586

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


    My Genesis Child Themes Work | Please Follow Me on Twitter If I’ve helped.

    #95667

    braddalton
    Participant
    Post count: 9782

    I would use this instead:
    [css]
    background-image: url(‘images/senior-right-wing.png’) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    [/css]

    And add the images to your child themes images folder.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.