Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
    
Thanks brad. Done already but it might help some one else in the community. –  Mohammad Mursaleen Jan 12 at 4:32
    
Did you forget something? –  Brad Dalton May 3 at 20:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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