Create New Topic

Icons in Navigation Bar

Home Forums Web + Tech Answers Icons in Navigation Bar

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

    Anonymous

    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

    #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

    #3425

    Anonymous

    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

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

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