Tuesday, February 18, 2014

Wordpress: Centered menü with CSS and jQuery dividers

This is an example of how to style your menu after inserting it into a wordpress theme to make it centered and to have dividers between the menu elements...

Insert the menu and the jQuery dividers in the theme file (header.php)

 <div id="menu">  
       <?php wp_nav_menu('header-menu');?>  
 </div>  
 <script>  
      jQuery(document).ready(function(){  
           jQuery('ul#menu-vizszintes-menu li:not(:last)').after('<li class="menu-divider">|</li>');  
      });  
 </script>  

The CSS:

 #menu {  
      text-align: center;  
      background-color: #000000;  
 }  
 .menu-horizontal-menu-container {  
      display: inline-block;  
 }  
 .menu-horizontal-menu-container ul {  
      list-style-type: none;  
      padding-left: 0;  
      margin-left: 0;  
      margin-right: 0;  
      margin-top: 0;  
 }  
 .menu-horizontal-menu-container ul li {  
      float: left;  
      padding: 0;  
 }  
 .menu-item a:link, .menu-item a:visited {  
      color: #ffffff;  
 }  
 .menu-item a:hover {  
      color: #15bae8;  
 }  
 .menu-divider {  
      float: left;  
      padding-left: 12px!important;  
      padding-right: 12px!important;  
      color: #fff;  
 }  



Complementary Cat Picture