I am creating a website on Wordpress and I would like to have a horizontal navigation menu in my header with the logo in the center as a link to the homepage. I have been able to create this look using the Wordpress menu, but when I look at the website on my phone the "home" link is situated in the center, which isn't how I would like it to be ordered.

Using the current template (HTML) is there a way to finagle the CSS so the nav menu looks similar to these guys: http://bostonscally.com?

Thanks!

#mpcth_page_header_content #mpcth_logo_wrap #mpcth_logo {
display:none;
}

#mpcth_page_header_content {
text-align: center;
padding: 0px 0px 0px 0px;
}

#mpcth_menu {
font-size: 18px;
font-weight: bold;
padding: 10px;
display: inline-flex;
}

#mpcth_menu .menu-item-166 > a {
  position: relative;
background-image:url('/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png');
background-repeat: no-repeat;
background-position: 0px 0px 0px 0px;
width: 300px;
height: 100px;
text-indent: -9000px;
padding: 0px;
}

#mpcth_page_header_content #mpcth_controls_wrap {
padding-right: 2em;
vertical-align: middle;
}

I recently answered a question similar to this.

It can be found here: How to add a custom item to a specific WordPress menu item position

There are 3 options as i said in the answer above.

jQuery, PHP or HTML/CSS and its down to what you are most comfortable with and if it is for a client, what they most prefer.

I would personally go with the PHP way and split the navigation in 2 and have the logo in the middle.

EDIT

So you'll need the jQuery version.

Your navigation will need to be setup with Home being the first element on the navigation. This will mean that the mobile version will have home as the first link.

Next you need to add the jQuery below underneath your inclusion of the jQuery library

jQuery(document).ready(function() {
    jQuery("ul#mpcth_menu").find("li:contains('Home')").hide(); // hides home from navigation
    var position = jQuery("ul#mpcth_menu li").length-1;
    var i = 0;
    jQuery('ul#mpcth_menu li').each(function() {
        if(i == position/2) {
            jQuery(this).after('<img src="http://www.bostonirishclothing.com/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png" width="250" />');
        }
        i++;
    });
});

This code removes the first element from the main nav, being the Home button, then figures out how many is left and places the logo into the middle.

You will also need to remove the CSS which adds the logo to the class menu-item-166 as this may cause problems.

Hope this fixes your problems.

DEMO