Css "Spriting" my nav bar

Community Forums Forums Design Tips and Tricks Css "Spriting" my nav bar

This topic is: not resolved

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 6 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #91102

    lvvvvvl
    Participant
    Post count: 19

    Hello,

    I recently did a speed check on my site and one of the advice tips was to css sprite my nav bar. I edited the default child theme nav bar by adding icons next to it, this is it:

    /*_____MENU ICONS_______*/
    
    .nav-primary .about a {
    background:url('/wp-content/uploads/2013/08/about.png') no-repeat 1.2em 1.3em; transparent;
    padding: 18px 15px 15px 40px;
    }
    
    .nav-primary .contact a {
    background:url('/wp-content/uploads/2013/08/email.png') no-repeat 1.2em 1.3em; transparent;
    padding: 18px 20px 15px 40px;
    }
    
    .nav-primary .sitemap a {
    background:url('/wp-content/uploads/2013/08/sitemap.png') no-repeat 1.2em 1.3em; transparent;
    padding: 18px 20px 15px 40px;
    }
    
    .nav-primary .tests a {
    background:url('/wp-content/uploads/2013/08/tests.png') no-repeat 1.2em 1.3em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .store a {
    background:url('/wp-content/uploads/2013/08/store.png') no-repeat 1.2em 1.2em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .entertainment a {
    background:url('/wp-content/uploads/2013/08/entertainment.png') no-repeat 0.8em 1.3em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .humor a {
    background:url('/wp-content/uploads/2013/08/humor.png') no-repeat 1.0em 1.3em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .life a {
    background:url('/wp-content/uploads/2013/08/life.png') no-repeat 0.9em 1.0em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .love a {
    background:url('/wp-content/uploads/2013/08/love.png') no-repeat 0.8em 1.3em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .mind a {
    background:url('/wp-content/uploads/2013/08/mind.png') no-repeat 0.5em 0.7em; transparent;
    padding: 18px 15px 15px 35px;
    }
    
    .nav-primary .spiritual a {
    background:url('/wp-content/uploads/2013/08/spirituality.png') no-repeat 0.9em 1.3em; transparent;
    padding: 18px 20px 15px 35px;
    }
    
    .nav-primary .misc a {
    background:url('/wp-content/uploads/2013/08/misc.png') no-repeat 1.1em 1.2em; transparent;
    padding: 18px 15px 15px 35px;
    }

    How would I go about doing this with my specific code?

    #100410

    Susan
    Moderator
    Post count: 9255

    As you posted this a while ago, I hope you got your issue resolved. If not, please let me know, and I will take a look (or escalate if I cannot help).

    If it is resolved, please mark it resolved, so that the thread can be closed.

    Thanks!


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

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

You must be logged in to reply to this topic.