Center LOGO in middle of navigation menu by jQuery & CSS

center-logo

Many beautiful fashion websites often center their LOGO in middle of navigation menu like the picture above, it looks very unique. So, I wanna share my idea after I compared some solutions with CSS only.

CSS Only

Let’s see the entire codes.

HTML makeup

<nav id="primary_menu" class="container">
		     <ul>
			   <li class="current"><a href="index.html">Home</a></li>
			   <li><a href="blog.html">Blog</a></li>
			   <li><a href="pages.html">Pages</a></li>
			   <li><a href="about.html">About</a></li>
               <!--Put LOGO here-->
               <li class="logo"><a href="#">LOGO</a></li>
			   <li><a href="gallery.html">Gallery</a></li>
			   <li><a href="contact.html">Contact</a></li>
			   <li><a href="elements.html">Elements</a></li>
		     </ul>
</nav>

CSS Part

.logo a{
	width:150px;
	height:150px;
	display: block;
	margin: auto;
        text-indent:-1000000px;
	border-radius: 200px;
	border:1px solid #000;
	background:#000;
}
#primary_menu ul li.logo{
	width:150px;
	height:150px;
	margin:0 30px;
}
#primary_menu ul li.logo a{
	position:absolute;
	top:65px;
}

Although we can achieve it with only CSS codes like above, but we have to manually put LOGO into UL tag, don’t you feel that it’s  a little bit inconvenient if we convert HTML templates to CMS like WordPress or Joomla. Let’s say WordPress, you must add .logo to the class field in the property area of that menu item .

add-logo-class

Enhance

Why not insert the LOGO into UL tags automatically? So, naturally I got the idea of fix this problem with jQuery. Just check the jQuery code below, I’ve already add comments for each line, it’s not hard to make sence.

jQuery(document).ready(function($){
     /*Center the LOGO*/
	var total_menu_items = $('#primary_menu ul li').length;  //Get the count of the all menu items
	var half_position_even=total_menu_items/2;   //If the count is even, just directly divide by 2
	var half_position_odd=(total_menu_items+1)/2;   //If the count is odd, just adding 1 in order to make it to be an even, then divide by 2
	var logo_html='<li class="logo"><a href="#">LOGO</a></li>'; //LOGO HTML
	
    /* Detect the count number is odd or even
       If it's divided by 2 and the result is an integer, we will know it's an even, vice versa.
    */
    var ex = /^d+$/;
	if (ex.test(total_menu_items/2)) {
          //When the total number of the menu items is even
	  $('#primary_menu ul li:nth-child('+half_position_even+')').after(logo_html);
	}else{
          //When the total number of the menu items is odd
	  $('#primary_menu ul li:nth-child('+half_position_odd+')').after(logo_html);
	}
});

That’s it. If you have any good suggestions, don’t forget to tell me in the comment.

2 thoughts on “Center LOGO in middle of navigation menu by jQuery & CSS

  1. jayr mendoza

    The script is a little buggy, I noticed that when the menu is even the logo won’t show up, but when it is odd the logo will be shown in the menu…
    Any thought about it?

    Reply

Leave a Reply