• Author
  • #1361120

    Hi, I am looking to add custom navigation to my blog. On my website ( I have the navigation as different fonts, and I’m looking to recreate that on my blog as well.

    I had created my website in dreamweaver. Is there an easy way to do this in wordpress?


    The blog I need help with is


    Hi Elie, I see that you are using images on the site you reference for the menu items and I would suggest the same on your WordPress site. You would target each menu item by ID and then add a background image and create a new hover rule for that ID.

    #menu-item-61 a {
    background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
    text-indent: -9999px;

    This would be the basic hover rule.

    #menu-item-61 a:hover {
    background: url("URL OF HOVER IMAGE") no-repeat scroll 0 0 transparent;

    Some additional declarations will be necessary probably depending on the size of your menu item images, but we can help you with that.

    You would create the above two rules for each menu item and upload all of your images to your media library and then get the URLs of those images to insert into the appropriate rules. You can get the menu items by doing a view source on your main page and looking inside the div with the “menu-navigation-container” class. The menu items are inside the li elements.

    This will likely sound harder than it is and once you have created one of them, it will get easier.

The topic ‘Navigation’ is closed to new replies.