Icons in Navigation Bar

Home › Forums › Web + Tech Answers › Icons in Navigation Bar

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 16th, 2013 at 3:13 PM #3422
    Anonymous
    Inactive

    Greetings all:

    I’m new to this forum. It was recommended to me by a fellow RapidWeaver user in the hope of addressing this issue. Recently, I completed a site for a client using SeyDesign’s Copper theme. The client wants to know if it’s possible to configure the navigation bar to have icons that reveal the names of the pages when you hover over them.

    http://brideface.com/home.html

    Any thoughts/advice would be greatly appreciated.

    My thanks,

    Paul Molloy

    November 16th, 2013 at 3:50 PM #3423
    Bryan Hadaway
    Keymaster

    Sure, there are many techniques for this.

    Something like this.

    Or something like the “Change Text Upon Hover” section here.

    If you can provide more detail and hopefully an image URL of one of the icons in mind for this I might be able to prepare a quick example.

    Thanks

    November 25th, 2013 at 2:54 AM #3425
    Anonymous
    Inactive

    Hi Bryan:

    That’s exactly what I’m looking for. I have a rough draft for an icon that I created a while ago that should work for these purposes (link below).

    As I mentioned previously, the client wants to know if it’s possible to configure the navigation bar so that when you mouse over a tab, a corresponding icon appears.

    The site is:

    http://brideface.com/home.html

    Any thoughts or help you could offer would be greatly appreciated.

    My thanks,

    Paul

    http://i143.photobucket.com/albums/r130/pmolloy4/brideface-home-icon_zps82abd6ee.png

    brideface-home-icon photo brideface-home-icon_zps82abd6ee.png

    November 25th, 2013 at 11:11 AM #3426
    Bryan Hadaway
    Keymaster
    nav.toolbar2 > ul > li > a[title="HOME"]:hover {
  background: url(http://i143.photobucket.com/albums/r130/pmolloy4/brideface-home-icon_zps82abd6ee.png) no-repeat scroll center center rgba(0, 0, 0, 0);
}

    And of course this is just a starting point and all sorts of other things can be done here and refined.

    [title="HOME"] is how you’ll identify each link. WEDDINGS, CLASSES etc will be the next ones to use.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.