How to vertically center Wordpress navigation bar

admin

Administrator
Staff member
I have a navigation bar at following wordpress site: <a href="http://tarjom.ir/demo/pwp" rel="nofollow">http://tarjom.ir/demo/pwp</a>

I have two major issues with this navigation bar:

1- I can't vertically align it at the middle.

2- There is a
Code:
div
wrapper as the parent of the
Code:
&lt;ul&gt;
tag that I can't remove it. However I have already set
Code:
'container' =&gt; ''
, but it does not work.

Code:
&lt;!-- Navigation bar--&gt;
  &lt;div id='wp_nav_section' class='grid-100 black-gray-bg font-roya' style='min-height: 100px; display: block;height:100%;'&gt;
    &lt;?php wp_nav_menu(array("container" =&gt; 'nav')); ?&gt; 
  &lt;/div&gt;
&lt;!-- End of navigation bar. --&gt;

Here is my wordpress navigation code:

Here is all my CSS related to the wordpress navigation:

Code:
.menu
    {
        height: 65px;
        min-height: 60px;   
        padding: 0px;
        text-align: right;
        background-color: #111;
        margin-bottom: 10px;
    }
.menu ul
    {
     direction: rtl;
     width: 70%;
     margin-right: auto;
     margin-left: auto;
     overflow: hidden;
     height: auto;
     padding-top: 0px;
    }
.menu li
    { 
      padding: 0px 0px;
      display: inline-block; 
    }
    .menu li a
    {
      color: white;
      text-decoration: none;
      display: block ;
      height: 45px;
      background-color: black; 
      border-right: 2px #333 solid; 
      padding: 16px 7% 3px 3%;
      box-sizing: border-box;
      width: 100px;
      margin: 0px 0px;
      font-size: 110%;
    }
    .menu li a:hover
    {
        background-color: #333;
        border-right: 2px #F90 solid;
    }

I need the
Code:
&lt;ul&gt;
tag to be centered vertically in the
Code:
&lt;div&gt;
wrapper.

Thanks in advanced.