Title: wp_nav_menu, CSS
Last modified: August 21, 2016

---

# wp_nav_menu, CSS

 *  Resolved [rbove](https://wordpress.org/support/users/rbove/)
 * (@rbove)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/wp_nav_menu-css/)
 * I’m trying to break my HTML up and bring it into WP, but my nav’s css isn’t working.
   Does anyone know why the CSS isn’t carrying over?
 * HTML:
 *     ```
       <!--====================header======================-->
       	 <div class="block2">
       		  <div class="main">
       				<header>
       					 <h1><a href="index.html">University</a></h1>
       					 <nav>
       						<ul class="sf-menu">
   
       <li><a href="#">Programs/Courses</a></li>
       <li><a href="#">Training Center</a></li>
       <li><a href="#">Research</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       					  </nav>
       					 <div class="clear"></div>
       				 </header>
   
       WP:
       <!--=================header===================-->
       	 <div class="block2">
       		  <div class="main">
       				<header>
       					 <h1><a href="index.html">University</a></h1>
       					 <nav>
       						<?php wp_nav_menu() ?>
       					  </nav>
       					 <div class="clear"></div>
       				 </header>
       ```
   
 * _[Please post code & markup between backticks or use the code button. Your posted
   code may now have been permanently damaged by the forum’s parser.]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/wp_nav_menu-css/#post-3665454)
 * I assume you mean your CSS styles from your non-wordpress site are no longer 
   applying to the navigation menu in your wordpress site.
 * WordPress’ `wp_nav_menu` function spits out certain classes and perhaps a different
   HTML structure.
 * View source the wordpress website and the non-wordpress website. Spot the difference
   of the navigation menus.
 *  Thread Starter [rbove](https://wordpress.org/support/users/rbove/)
 * (@rbove)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/wp_nav_menu-css/#post-3665594)
 * I do see the difference now, any ideas on how to get the function to spit out
   the right code to make this work?
    Thanks for your time!
 * WordPress:
 *     ```
       <header>
       					 <h1><a class="logo" href="index.html">University</a></h1>
       					 <nav>
       						<div class="menu-main-nav-menu-container"><ul id="menu-main-nav-menu" class="menu"><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://publix.newhaven.edu/hlee-test/?page_id=15">Programs</a></li>
       <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://publix.newhaven.edu/hlee-test/?page_id=17">Training Center</a></li>
       <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://publix.newhaven.edu/hlee-test/?page_id=18">Research</a></li>
       <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://publix.newhaven.edu/hlee-test/?page_id=19">About</a></li>
       <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://publix.newhaven.edu/hlee-test/?page_id=20">Contact</a></li>
       </ul></div>					  </nav>
       					 <div class="clear"></div>
       				 </header>
       ```
   
 * HTML:
 *     ```
       <header>
       					 <h1><a class="logo" href="index.html">University</a></h1>
       					 <nav>
       						<ul class="sf-menu">
       							<li><a href="file:///Users/Bove/Creative/Work/UNH/HCLee/site/programs.html">Programs/Courses</a></li>
       							<li><a href="#">Training Center</a></li>
       							<li><a href="#">Research</a></li>
       							<li><a href="#">About</a></li>
       							<li><a href="#">Contact</a></li>
       						</ul>
       					  </nav>
       					 <div class="clear"></div>
       				 </header>
       ```
   
 *  Thread Starter [rbove](https://wordpress.org/support/users/rbove/)
 * (@rbove)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/wp_nav_menu-css/#post-3665707)
 * I figured this out: I had to add menu_class’ => ‘sf-menu’
 *  `<?php wp_nav_menu(array( 'theme_location' => 'main_menu' , 'menu_class' => '
   sf-menu')); ?>`
 * Thanks!
    -Rob

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘wp_nav_menu, CSS’ is closed to new replies.

## Tags

 * [html to wp](https://wordpress.org/support/topic-tag/html-to-wp/)
 * [wp_nav_menu()](https://wordpress.org/support/topic-tag/wp_nav_menu/)

 * 3 replies
 * 2 participants
 * Last reply from: [rbove](https://wordpress.org/support/users/rbove/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/wp_nav_menu-css/#post-3665707)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics