How to add a custom item to a specific WordPress menu item position

Question

I have a primary menu registered and displayed that consists of 4 links (home, about, news, blog). I want to add html (a logo) in between the second and third menu and I was

Answer 1

PHP Version

One way would be to create 2 navigation menu's which are then used.

header_menu_1 | LOGO | header_menu_2

Within the back-end, you'd need to create a new header location and then add the 2 menu items to it.

Then within your header.php file, have this code.

 'header_menu_1' );
    $args2 = array( 'menu' => 'header_menu_2' );
    wp_nav_menu($args1);
?>

That will be the easiest way without using jQuery or messing about with plugins.

WP Nav Menu

Adding New WordPress Menus

jQuery Version

$(document).ready(function() {
    var i = 1;
    $('ul li').each(function() {
        if(i == 2) {
            $(this).after('');
        }
        i++;
    });
});

Demo

CSS Version

This is a really dirty hack way of doing it.

Using nth-child, select out the 2nd and 3rd elements. Both items get more margin for the middle so 2nd element 30px margin right and 3rd element 30px margin left.

Then put the div with the logo in it to be position absolutely in the middle.

Example:

CSS:

#container {
    width: 100%;
}

ul {
    display: block;
    width: 100%;
}
li {
    display: inline-block;
    width: 15%;
    padding: 1.25%;
    margin: 1.25%;
    background: blue;
}

li:nth-child(2) {
    margin-right:10%;
}
li:nth-child(3) {
    margin-left: 10%;
}

#container img {
    width: 20%;
    position: absolute;
    left: 50%;
    margin-left: -7.5%;
}

HTML:

    
    

        
Home
        
Home
        
Home
        
Home
    

Demo