I am having issues with the spacing of the dropdown on the nav bar. I added the menu through WordPress admin panel. When I hover over the dropdown, the words are all crumpled together. I need to space them correctly. You can view the problem here.

Here is the code in header.php:

wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class'     => 'navbar-collapse',
'menu'           => 'Main menu',
'sort_column'    => 'menu_order',
'container'      => '',
'items_wrap'     => '<ul class="nav navbar-nav navbar-right">%3$s</ul>'
) );

Here is the CSS code:

.sub-menu {
display:none;
position:absolute;
margin-top:3px;
}
li:hover .sub-menu {
display:block;
position:absolute;
}
.navbar-nav {
padding-top:15px;
}
.sub-menu li {
list-style:none;
border-top:3px solid #731472;
background-color:#F99E1C;
}
.sub-menu li a {
padding:15px 12px;
background-color:#F99E1C;
color:#fff;
}
/* Does Spacing of Nav Bar */
.nav > li > a {
position: relative;
display: block;
padding: 15px 20px;
}
.navbar-nav {
margin: 7.5px -15px;
padding-top:8px;
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 10px;
line-height: 35px;
color: #FFFFFF;
font-size: 16px;
}

I need to display anchor tags block to fix this, as the nav menu is done through the WordPress platform and not in the code in the header. How would I do this?

Thank you.

Read more here: WordPress Dropdown in Navbar, spacing between links


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: