wp_nav_menu, CSS

  • Resolved rbove

    (@rbove)


    12 years, 11 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.]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 11 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.

    Thread Starter rbove

    (@rbove)

    12 years, 11 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>

    Thread Starter rbove

    (@rbove)

    12 years, 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

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

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