Help with two styling issues on a navigation menu

I finally got my custom navigation menu to look almost like I want, with a few basic styles and CSS3 animation, but I ran into a couple problems.

  1. the hover animation is being applied to all the links when I hover one, when it should only effect the one I’m hovering over
  2. the links are being displayed vertically, when the static HTML version has them displayed horizontally like I wanted

Screenshots:

the first list is the php wordpress one, and the secont is the static html one.

Code:

<hr>
		  <?php wp_nav_menu( array(

				'theme_location'		=> 'menu-1',
				'container'				=> 'nav',
				'container_class'		=> 'navContainer',
				'menu_class'			=> 'menuItem hover-grow'

			) );
		  ?>
      <hr>
      
      <hr>
		<nav class="navContainer">
			<ul>
				<li class="menuItem hover-grow">
					<a href="#">Home</a>
				</li>
			 	<li class="menuItem hover-grow">
					<a href="#">Blog</a>
				</li>
				<li class="menuItem hover-grow">
					<a href="#">Buisness</a>
				</li>
			</ul>
		</nav>
	  <hr>
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.navContainer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.menuItem {
	display: inline;
	font-size: 1.9em;
  	font-family: gouditaSerial, serif;
	padding-left: 7%;
	padding-right: 7%;
}

.menuItem a {
  	color: #000;
}

.menuItem a:hover,
.menuItem a:focus {
  	text-decoration: none;
}

/*--------------------------------------------------------------
# Hover Effect
--------------------------------------------------------------*/

.hover-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.hover-grow:hover, .hover-grow:focus, .hover-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

When you view the (html) source of the WP menu, how does that look?
The html ans css you show clearly puts the menu inline as expected, so we can assume the code WP is producing is different in some way.

okay, this is what it put out:

<nav class="navContainer">
	<ul id="menu-main-menu" class="menuItem hover-grow">
		<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-18 current_page_item menu-item-19">
			<a href="http://localhost:8888/WordPressAimeeLeVally/">Home</a>
		</li>
		<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">	<a href="http://localhost:8888/WordPressAimeeLeVally/blog/">Blog</a>
		</li>
	</ul>
</nav>

I noticed that the classes that are only supposed to be on the li elements also got applied to the ul element, and this is probably what is causing the problem.
If this is the case, how do I fix it?
Edit: i noticed as well that the classes didnt get applied to the li elements

Yes the html is different with more classes and classes where they probably should not be, plus a load of IDs thrown in too. That would explain it.

I guess it’s down to the script that renders the menu.

Have you tried applying the .hover-grow class to the li items each, instead of ul? That is what I would do.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.