Making "Photos" Clickable Menu Items Instead of Words

  • Unknown's avatar
    meikafcc · Member ·

    I realize WordPress doesn’t have the font I want, and that’s okay! But I really want my old site to look like my new site, and the font options just aren’t there.

    I thought about creating .jpeg’s and using those for the menu items instead, so that I can still get what I want.

    BUT I still want them to be clickable menu options.

    “Energy Medicine Solutions” “Apothecary” “Testimonials” and “Your Questions Answered” – 4 images, 4 different page links.

    How do I do this using CSS?

    The font i’m looking for is Grandmas Typewriter.

    Thanks so much for any help that comes my way!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    This can be done. Each menu item, in the li element will have a unique CSS id. With that we can add an image to a specific menu item as the background. Each and every menu item, including submenus, if you wish to do those as well, would require unique CSS rules, and I don’t know how things are going to react once the touch menu activates on screens/windows narrower than 644px. Additional adjustments and CSS rules may be needed for each menu item. We may end up having to limit this to screens/windows 644px and wider. The following would be the generic code for energy medicine solutions. 

    #menu-item-31 {
    background: url("URL_OF_IMAGE") no-repeat center center /auto 70% transparent;
}
#menu-item-31 a {
    color: rgba(0, 0, 0, 0);
}
#menu-item-31 a:hover {
    background: none;
}

    Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image.

    You can use the web inspector built into your browser to find the CSS ids for the remaining menu items.

    The above sample code may need adjustments depending on the size and nature of your images. Also, it may be a challenge getting them all to look the same size. I would suggest when you create the images that you crop them very tightly with virtually no whitespace around the lettering. That will give us the best shot at making things look consistent.

  • The topic ‘Making "Photos" Clickable Menu Items Instead of Words’ is closed to new replies.