Add logo in navigation bar before menu items in twenty thirteen?

Question

Add logo in navigation bar before menu items in twenty thirteen?

Mohammad Mursaleen

2015年12月26日 14:55

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.

Topic theme-twenty-thirteen Wordpress

Category Web

Tornrise · Accepted Answer · 2015年12月26日 14:55

1

Tornrise answered at 2015年12月26日 14:55

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.

Brad Dalton · Accepted Answer · 2014年5月3日 21:11

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

Add logo in navigation bar before menu items in twenty thirteen?

About