Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

WordPress - Image button menu with dropdowns

  • 03-03-2011 3:04pm
    #1
    daymobrew
    Registered Users, Registered Users 2 Posts: 6,570 ✭✭✭


    I am converting a PSD to WordPress theme.
    The designer (at the client's request) included image buttons for the menu.

    I have been unable to the WordPress ul/li menu to use these. Each menu item has a unique class (the Menus area in WP doesn't allow specifying ids).

    My code is: [PHP]<?php wp_nav_menu( array( 'container_class' => 'button-header', 'theme_location' => 'primary' ) ); ?>[/PHP] and generates this html: 
    <div class="button-header">
<ul id="menu-primary" class="menu">
<li id="menu-item-25" class="services-button menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-25"><a title="See the list of our services" href="/services/">Services</a></li>
<li id="menu-item-24" class="products-button menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a title="See the list of products that we sell" href="/products/">Products</a></li>
<li id="menu-item-28" class="special-offers-button menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28"><a title="Check out our latest special offer" href="/category/special-offers/">Special Offers</a></li>
<li id="menu-item-30" class="online-vouchers-button menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a title="Buy vouchers online" href="/online-vouchers/">Online Vouchers</a></li>
<li id="menu-item-29" class="book-online-button menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a title="Book your session online" href="/online-booking/">Book Online</a></li>
</ul></div>

    I tried a variant of Advanced CSS Menu without a background image but no luck. I might try using a background image exactly like this.

    Right now I am using an image map but that is not ideal as it hard codes the menu.


Advertisement