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.

  • show your code...wat u tried so far. – Moaz Ateeq Dec 16 '13 at 16:42
  • I tried .nav-menu ul:before to display image before ul displaying menu items but it was creating disturbance – Mohammad Mursaleen Dec 16 '13 at 16:52
  • show your code buddy. – Moaz Ateeq Dec 16 '13 at 16:54
  • also tried to echo the image in different places within header.php in <div id="navbar" class="navbar"> – Mohammad Mursaleen Dec 16 '13 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. – Mayeenul Islam Dec 16 '13 at 17:08
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

| improve this answer | |
  • Thanks brad. Done already but it might help some one else in the community. – Mohammad Mursaleen Jan 12 '14 at 4:32
  • Did you forget something? – Brad Dalton May 3 '14 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.

| improve this answer | |

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.