Image in menu

  • Resolved Kabyy

    (@kabyy)


    12 years, 8 months ago

    Hi,

    I would like to add images for each part in my menu.

    I added <img> brackets in my custom menu like that:
    <img src="https://www.mywebsite.com/wp-content/themes/twentyten_child/images/button_offer.png" style="width: 125px; height: 125px; padding: 0; margin: 0;">Our Offer

    but then I don’t see anything on my website.

    I have a child theme and my <nav> is not into my header anymore. Actually it is in my home page template:

    <?php
/*
Template Name: home
*/
?>

<?PHP get_header('home'); ?>

<?PHP get_template_part( 'loop', 'index' ); ?>

<nav id="access_home" role="navigation">
			  <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->

<?PHP get_footer('home'); ?>

    Can it create problems ?

    Any idea how I could solve it ?

    Many thanks,

    Xavier

Viewing 8 replies - 1 through 8 (of 8 total)

  • You need to do this using pure CSS in your child theme. If you examine the menu’s output, you will see that each menu item as at least one unique class. Use those classes in your CSS to apply images as backgrounds.

    Thread Starter Kabyy

    (@kabyy)

    Hi and thanks for your quick answer !

    I tried aswell and coded this:

    #access_home li.page-item-56{
	background-image: url(https://www.mywebsite/wp-content/themes/twentyten_child/images/button_offer.png);

    Is it wrong ?

    It looks OK to me. More importantly, is it working for you?

    Thread Starter Kabyy

    (@kabyy)

    Nope and it makes me crazy… ??

    But we are two persons working on this wordpress website so i guess we are creating problems for each others. No that I know it SHOULD be ok, i’ll try to identify what could have done the other that could possibly make a problem with this image.

    Tanks !

    Thread Starter Kabyy

    (@kabyy)

    Here is my menu code: 

    <nav id="access_home" role="navigation">

	<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>

	<div class="menu">
                 <ul>
                          <li class="page_item page-item-108 current_page_item"><a href="https://www.mywebsite.com/">Home</a></li>
                          <li class="page_item page-item-56"><a href="https://www.mywebsite.com/?page_id=56">Notre offre</a></li>
                          <li class="page_item page-item-60"><a href="https://www.mywebsite.com/?page_id=60">Qui sommes nous ?</a></li>
                           <li class="page_item page-item-2"><a href="https://www.mywebsite.com/?page_id=2">Sample Page</a><ul class='children'> <li class="page_item page-item-104"><a href="https://www.mywebsite.com/?page_id=104">test</a></li></ul></li>
                           <li class="page_item page-item-58"><a href="https://www.mywebsite.com/?page_id=58">Vos attentes</a></li></ul></div>
			</nav>

    Why should I write in my css to consider the good <li> item according to you ?

    Thanks

    Something like:

    #access_home .menu .page-item-108 {
background-image: url(images/button_offer.png);
}

    should work assuming that your images are in your current theme’s images sub-folder.

    Thread Starter Kabyy

    (@kabyy)

    OMG I love you !

    ID was still 56 but I was missing the “menu” id !

    Thanks so much I’ve been looking for hours without even seeing it !

    Bye

    Thread Starter Kabyy

    (@kabyy)

    Page item was 56 I mean…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image in menu’ is closed to new replies.