WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] wp_nav_menu, CSS (4 posts)

  1. rbove
    Member
    Posted 12 months ago #

    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.]

  2. Andrew Nevins
    Volunteer Moderator
    Posted 12 months ago #

    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.

  3. rbove
    Member
    Posted 12 months ago #

    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>
  4. rbove
    Member
    Posted 11 months ago #

    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

Reply

You must log in to post.

About this Topic