Custom Menu with custom graphic button

  • Author
  • #718200


    What I’m hoping to do is add graphic button type bars for each menu item (there will be 5). Can this be done on the Coraline theme? Or is there another theme that I can use.

    Any suggestion is appreciated.


    The blog I need help with is



    Hi keiroservices,

    This can be accomplished with using CSS, available through the Custom Design upgrade. It’ll work with Coraline, yes, or any other theme that supports custom menus.


    Do you know any Blog that has this kind of customization and we can take a look?



    @keiroservices Not offhand but you can probably do something like the following.

    .page-item-XX a,
    .menu-item-XX a { /* this will depend on whether you're using a custom menu or not */
    background: url( no-repeat; /* a link to the image you're using */
    text-indent: -9000px; /* This will hide the text */
    width: 20px; /* use the appropriate width for your graphic*/

    Each menu item will be wrapped in a list element with a class that matches up with a particular number. You can use that number to target each link, replace the image, and then … success! I like to use Firebug to find out the correct class.

    If you just want to add an image next to each link you can skip the text-indent and the width properties and add some left-padding to the link.

    I hope that helps you get started!

The topic ‘Custom Menu with custom graphic button’ is closed to new replies.