Using an Image for the last Item in Nav Bar

Community Forums Forums Design Tips and Tricks Using an Image for the last Item in Nav Bar

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  blogjunkie 4 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #92284

    Tom88
    Participant
    Post count: 23

    Hi All,

    I am trying to figure out how to add an image in the Nav Bar for the last item in the Nav Bar. Basically I have a promotion page, and in the Nav Bar instead of saying Promo Page, I would like to display a promo icon image in its place? Any help would greatly be appreciated.

    Wordpress v3.8.1, Genesis Sample Theme v2.0.1, Genesis Framework v2.0.2

    Thank you,

    #92288

    blogjunkie
    Participant
    Post count: 35

    Hi Tom, you’ll need to edit your CSS for this. I’ll leave you to Google for details, but here’s the general steps:

    .nav-primary li:last-child a {
    /* Display the image as a background */
    background: url(‘http://yoursite.com/path/to/icon.png’) no-repeat 0 0;
    padding-left: 40px; /* adjust this to prevent your text overlapping the icon */
    /* the following 3 lines will hide the text completely */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    }

    Replace .nav-primary with .nav-secondary if you want the icon to go on the secondary nav. Remove the last 3 lines of code if you don’t want your text hidden.

    Further reading:

    background property – http://css-tricks.com/almanac/properties/b/background/

    Good luck!


    WordPress evangelist, Nike runner, Apple fanboy.
    Work: ClickWP WordPress Support, Play: adventures of a blogjunkie. Talk to me on Twitter @blogjunkie

    #92289

    Tom88
    Participant
    Post count: 23

    Thank you for your response, is there a way to float an image to the right of the Primary Navigation Bar, and I will create a link for the image, since I already have too many links on my nav bar, and it is wrapping to the next line. I would like to float the image to the right of the Navigation bar. I cannot use absolute positioning since this is a responsive website. Any Thoughts?

    #92292

    blogjunkie
    Participant
    Post count: 35

    Hi Tom, if it’s a responsive site you should definitely include the image as a link in the nav bar, not floated outside. This is the way that Genesis does it to for the navigation extras (date, twitter, search bar).


    WordPress evangelist, Nike runner, Apple fanboy.
    Work: ClickWP WordPress Support, Play: adventures of a blogjunkie. Talk to me on Twitter @blogjunkie

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

You must be logged in to reply to this topic.