Mostafa Talebi Mostafa Talebi - 1 year ago 57
PHP Question

How to vertically center Wordpress navigation bar

I have a navigation bar at following wordpress site:

I have two major issues with this navigation bar:

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

2- There is a

wrapper as the parent of the
tag that I can't remove it. However I have already set
'container' => ''
, but it does not work.

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

Here is my wordpress navigation code:

Here is all my CSS related to the wordpress navigation:

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
tag to be centered vertically in the

Thanks in advanced.

Answer Source

Remove height from .menu{} class. this will solved your vertical align issue.