0

Trying to add a navigation Home icon Failing to work.

Here's my nav:

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

I've tried adding: <img src="/home.png"/> to the second line, still no success.

I have tried:

<img src="http://fullpathtoimage/home.png" /><h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

Thanks

  • Show your code, pls. Where exactly did you put this <img>? – Krzysiek Dróżdż Dec 2 '13 at 11:46
  • What did your code look like that was not working? <img src="http://fullpathtoimage/home.png" /><h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> Have you considered setting it as a background image, then declaring in in css? – user38891 Dec 2 '13 at 16:51
  • hey user, I've done that, but I'm not really sure how to then hide the text. I only wanted an image of a house for the home section – Bradly Spicer Dec 3 '13 at 10:02
  • I'm not clear on what you're trying to do - do you have a live example we could check out? Are you trying to add a home icon to replace the menu toggle H3? or is it part of your site navigation? – Michelle Jan 9 '14 at 20:21
1

I figured it out.

You have to search your style.css file and find

/* Buttons */

Under that you will find the following classes

.menu-toggle,
article.post-password-required input[type=submit],
.bypostauthor cite span {}

.menu-toggle,
button,
 {}

button[disabled],
input[disabled] {}

.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
 {}

There are 2 states of the button that you need to configure.

Hover and active.

Just change the background-image:url(''); for each state to what image you want in the background.

Then just either negative indent the text by -9999 or delete the text from the header.php file as you previously stated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.