Using an Image for the last Item in Nav Bar

[Tom88]

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,

[blogjunkie]

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

[Tom88]

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?

[blogjunkie]

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

[Author]

Posts