Use featured image as navigation thumbnail

  • Sem90

    (@sem90)


    12 years, 7 months ago

    I made a website using the Twentyten theme as a basis, although the original design was based on HTML. In this original design there was a horizontal menu-bar, with underneath every item also an image. Both were linked to a page.

    I changed the menu so that it centers out with the images / thumbnails (120×77 pixels). However, currently I made all my thumbnails in one big JPG, which has been put in with a div. Result is that I can’t link the seperate images anymore.

    What I’d like to do is to be able to set a featured image for every page in my navigation. And then automatically the menu will be created so that it contains both my ‘menu-bar’ and its assigned image. Any ideas?

    See here for the website.

    Code: (picturebar is where I currently have a JPG)

    <div id="access" role="navigation">
<div class="skip-link screen-reader-text"></a><a href="#content">"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div><!-- #access -->
<div id="picturebar"> </div>

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    12 years, 7 months ago

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    Create a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

    Thread Starter Sem90

    (@sem90)

    12 years, 7 months ago

    OK – so now I have made my own child theme for this website, with a back-up of the Twentyten theme.

    Once again I am struggling to connect an image to every menu-item, that can be spawned in a different DIV box.

    This is the site: click

    Thread Starter Sem90

    (@sem90)

    12 years, 7 months ago

    Any ideas? This image describes a potential solution:

    Click here

    Gregg Franklin

    (@greggfranklin)

    12 years, 7 months ago

    I believe you could achieve this by adding a class to the menu item and then with CSS add the image and styling. You may have to go to Screen Options to turn on CSS Classes in the menus.

    Thread Starter Sem90

    (@sem90)

    12 years, 7 months ago

    Thanks Gregg. I have looked into that and it is a potential solution, just as an imagemap is. But changing the menu link will render these solutions useless.

    If I could make the menu-link bigger then the actual menu, that would be the perfect solution. That way I could make the link the height of the menu + image underneath it. However as soon as I try to change the menu-height the actual menu bar gets bigger too…It’s a good idea though, but I need some CSS Help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Use featured image as navigation thumbnail’ is closed to new replies.