Use featured image as navigation thumbnail (6 posts)

  1. Sem90
    Posted 4 years 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 (120x77 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>

  2. esmi
    Forum Moderator
    Posted 4 years 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.

  3. Sem90
    Posted 4 years 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

  4. Sem90
    Posted 4 years ago #

    Any ideas? This image describes a potential solution:

    Click here

  5. Gregg Franklin
    Posted 4 years 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.

  6. Sem90
    Posted 4 years 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!

Topic Closed

This topic has been closed to new replies.

About this Topic