0

I am building a theme and have noticed that when I create a menu with just html or have it dynamically add menu items based on pages it looks how it was meant to be. Although when I change the code to generate the menu from the menu editor it adds alot of extra padding to the menu.

Is this a wordpress issue? Has anyone heard of this before? Here is an example.

When I generate a menu using the menu editor it adds padding:

 <div class="header">
    <div class="nav">

<ul>

       <li>

       <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

       </li>


</ul>

When I generate a menu through just hardcoding HTML it looks fine:

<div class="header">
    <div class="nav">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#support">Support</a></li>
      </ul>

Problem has been solved. I removed both the <ul> and <li> tags and the navigation is in it's proper location.

<div class="header">
        <div class="nav">

           <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
6
  • 1
    wp_nav_menu generates a full unordered list - having it within <li> tags like your first block of code would mean the generated menu is a list-within-a-list, which may explain the padding...
    – Andy Adams
    Commented May 2, 2013 at 0:39
  • 2
    Are you referring to extra whitespace in the markup or padding in terms of CSS and alignment?
    – EAMann
    Commented May 2, 2013 at 0:41
  • Referring to padding in terms of CSS. It is using the same classes when I check but for some reason the links are moved down quite a bit. Commented May 2, 2013 at 2:02
  • @AndyAdams I tried removing the <li> and I am having the same issue. I have my own li and ul classes that I use. When I check to see what it is using it is inheriting extra classes from a user agent stylesheet for those. So it appears that it is ignoring my classes. I don't know how to switch it back though. Commented May 2, 2013 at 2:19
  • Oops. I didn't see that it added extra <UL> tags aswell. After removing those it seems to work. Commented May 2, 2013 at 2:56

1 Answer 1

1

@user1632018 reports that the problem has been solved:

I removed both the <ul> and <li> tags and now the navigation is in its proper location:

<div class="header">
    <div class="nav">
       <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.