0

I am customizing the twenty thirteen theme and want to add a logo image in the navigation bar before menu items like this link.

I have tried different approaches but didn't work.

Would appreciate any suggestions in this regard.

5
  • show your code...wat u tried so far.
    – Moaz Ateeq
    Dec 16, 2013 at 16:42
  • I tried .nav-menu ul:before to display image before ul displaying menu items but it was creating disturbance Dec 16, 2013 at 16:52
  • show your code buddy.
    – Moaz Ateeq
    Dec 16, 2013 at 16:54
  • also tried to echo the image in different places within header.php in <div id="navbar" class="navbar"> Dec 16, 2013 at 16:56
  • Suggest you to do the changes in a child theme. Otherwise the changes will wipe out on the next update on TwentyThirteen. Dec 16, 2013 at 17:08

2 Answers 2

2

Tested on a Twenty Thirteen & Twenty Twelve child theme.

enter image description here

Try this from your child themes functions.php file.

You can add the image using various methods.

add_filter( 'wp_nav_menu_items', 'wpsites_add_logo_nav_menu', 10, 2 );

function wpsites_add_logo_nav_menu( $menu, stdClass $args ){

if ( 'primary' != $args->theme_location )
    return $menu;


$menu .= '<nav class="nav-image"><img src="' . get_stylesheet_directory_uri() . '/images/header.png" /></nav>';

return $menu;

}

Sample CSS for your child themes style.css file:

.nav-logo {
float: left;
margin-right: 20px;
}

You'd also want some Media Queries which will vary per theme.

Here's the result on Twenty Twelve:

enter image description here

2
  • Thanks brad. Done already but it might help some one else in the community. Jan 12, 2014 at 4:32
  • Did you forget something? May 3, 2014 at 20:39
0

I believe that:

.nav-logo {
float: left;
margin-right: 20px;
}

should read:

.nav-image {
float: left;
margin-right: 20px;
}

That's what worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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