Wordpress导航css

Question

I'm migrating my HTML / CSS website to WordPress (creating a theme). I'm using the code shown below to turn wordpress 'pages' into navigation li links.

The code works, But the Word press nav styling is slightly different to the HTML site.

The code should work the same in both cases, but I suspect WP is not applying either an id or class

Can anyone help me understand why these code snippets give different styling results (The same css sheet is used for both the wordpress and the non wordpress site)

WP nav code (found in header.php)

    <nav>
      <ul id="navigation" class="slimmenu"> 
        <?php wp_nav_menu(); ?>  
      </ul>
    </nav>  

HTML site nav code

<nav>
  <ul id="navigation" class="slimmenu"> 
    <li><a href="bike-shed.php">Home</a></li>
    <li><a href="mountain-bikes.php">Bikes</a></li>
    <li><a href="bicycle-parts.php">Parts</a></li>
    <li><a href="charity-bikeevents.php">Events</a></li>
    <li><a href="contact-bikeshed.php">Contacts</a></li>
  </ul>
</nav>

many thanks,

Answer 1

You should not have wp_nav_menu() inside a <ul> element.

This function creates HTML which includes a wrapper (div) and it's own <ul> element. so your HTML is going to be invalid and your CSS is unlikely to work.

Just use:

<nav>
    <?php wp_nav_menu( array( 'menu_id' => 'navigation', 'menu_class' => 'slimmenu') ); ?>  
</nav>  

If your CSS selectors are not overly specific, they may still work with the HTML generated by WordPress.