WordPress.org

1. rcwatson
   Member
   Posted 1 year ago #

   I’m currently scratching my head over the Classes settings. A client wants me to create a wordpress theme and gave me an xhtml template and CSS2 stylesheet with the following navigation styles defined.

   #nav1
   {
   height:57px;
   background:url(‘http://example.com/img/top1.png’) no-repeat top center;
   }
   #nav1 a, #nav2 a
   {
   display:block;
   height:57px;
   float:left;
   border:none;
   }
   #nav2 #navHome
   {
   width:119px;
   background:url(‘http://example.com/img/nav1.jpg’) 0px 0px no-repeat;
   }

   Now, these are CSS ids rather than classes, so I converted them to classes by removing the # and replacing it with a . so I could enter their names in the CSS Classes property box in the WordPress Menu item interface.

   .nav1
   {
   height:57px;
   background:url(‘http://example.com/img/top1.png’) no-repeat top center;
   }
   .nav1 a, .nav2 a
   {
   display:block;
   height:57px;
   float:left;
   border:none;
   }
   .nav2 .navHome
   {
   width:119px;
   background:url(‘http://example.com/img/nav1.jpg’) 0px 0px no-repeat;
   }

   But, when I put “nav2 navHome” in the Classes setting to style the button according to what is set for nav2 and navHome classes, the menu items don’t style correctly. The button background image doesn't appear in the browser, and the text meant to overlay it is only a regular link, not a styled one like it should be.

   The rendered source shows up like this:

   <div class="nav1">
   	<div class="container_12">
   		<div class="grid_12">
   			<div class="nav2">
   				<div class="menu-primary-menu-container"><ul id="menu-primary-menu" class="menu"><li id="menu-item-202" class="nav2 navHome menu-item menu-item-type-post_type menu-item-202"><a href="http://example.com/blog/testing-new-page/">Home</a></li>
   </ul></div>				<div class="clear"></div>
   			</div>
   		</div>
   	</div>
   </div>

   What am I forgetting here? Is it that I tried to change IDs to classes in the CSS (which I thought was legit to do)? Or is it possibly something to do with how I've integrated the Menu calls into my theme (see code below for that)?

   functions.php
   

   <?php
   add_action( 'init', 'register_my_menu' );
   
   function register_my_menu() {
   	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
   }
   ?>

   header.php
   

   <div class="nav1">
   	<div class="container_12">
   		<div class="grid_12">
   			<div class="nav2">
   				<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>
   				<div class="clear"></div>
   			</div>
   		</div>
   	</div>
   </div>

2. alchymyth
   The Sweeper
   Posted 1 year ago #

   try and replace the 'weird' single quotes (from copy/paste?) with normal straight ones:

   from this:
   (‘http://example.com/img/top1.png’)

   to this:
   ('http://example.com/img/top1.png')

Topic Closed

This topic has been closed to new replies.