Hey guys,

 

So I just went and installed my wordpress theme and it's doing some strange things. The problem is with the menu.. here's how it should look like (ignore the fact that it's not in english)

the code: http://jsfiddle.net/br9LwwLy/

the actual wp site: http://tasmaniandevilz.com/mima/

As you can see, the bottom border (underline) is not animated and there is a tiny gap under each menu item that is not the actual link - when I hover over that spot, the sub-menu disappears. Strangely enough, this is only the problem in Chrome.

I have no clue what's going on. The links are dynamically taken from the pages.. here's the header code.

 

<div class='container'>
<header class='clearfix'>
<a href='<?php bloginfo('url'); ?>'><h1>Misia Máriina</h1></a>
<nav>
<ul>
<li>
<a class='bordermenu'><?php wp_list_pages('sort_column=menu_order&depth=2&exclude=359,368,441,439,443,516&title_li='); ?></a>
</li>
</ul>
</nav>
</header>
<img class='sep' src="<?php bloginfo('template_directory'); ?>/img/sep.png" />
</div>
 

 

There is one more error.. the special characters are encoded strangely on the home page. s16.postimg.org/dv9smvqk5/image.jpg It's weird that when you click on some of the links, it works alright. s16.postimg.org/5ohsvb0hh/image.jpg I am guessing there's some problem in the mysql database encoding? But why is it happening only on the home page?

Thanks guys

 

Your problem is probably that you are outputting wp_list_pages() inside anchor tags when it outputs li elements by default and should therefore be inside ul tags. Check out http://codex.wordpress.org/Function_Reference/wp_list_pages for examples and information.

 

For your second problem it could be that you saved the other pages with a different encoding. Sometimes code editors are to blame here.

Can I ask why you are looking to output the page list rather than use a menu in the admin system?

@@mantis thanks for the answer. Ye, the encoding was an issue with my code editor. I already fixed that. I am going to have a look at that codex to see if I can make it work.

 

@@junior because my theme doesn't have a menu function

Your problem is probably that you are outputting wp_list_pages() inside anchor tags when it outputs li elements by default and should therefore be inside ul tags. Check out http://codex.wordpress.org/Function_Reference/wp_list_pages for examples and information.

 

For your second problem it could be that you saved the other pages with a different encoding. Sometimes code editors are to blame here.

 

ok, so the only thing I did is remove the li and a elements, so the code looks like this:

 

<nav>
<ul class='bordermenu'>
<?php wp_list_pages('sort_column=menu_order&depth=2&exclude=359,368,441,439,443,516&title_li='); ?>
</ul>
</nav>
 

 

As you can see on the site, it's doing some pretty weird stuff. Now the 'invisible' menu on top of the real one actually animates (rolls out) as it should, but of course it shouldn't be there at all. http://tasmaniandevilz.com/mima/

Your pages are outputting correctly in the source code but it looks like the css might be getting in your way. You might have an easier time with a theme that includes wp-menu. Or you could build it yourself if you'd rather. Have a look at the wp-menu function in the codex.

Alright. I managed to do it Works much better now... only two more things I am dealing with. Maybe you could help me out.

 

On the actual WP site - http://tasmaniandevilz.com/mima when you hover off of the primary menu, the bottom border doesn't stay there. The second thing is that the border (underlining) happens also on the sub-menu links now - which it should not.

Here's a code (non-wordpress) where I managed to get that underlining to stay on the primary menu. But the secondary menu still has it.

http://jsfiddle.net/c4qjb3wp/

 

I couldn't figure out how to address the specific links, since I am using only one class for the whole nav element. Do you have any advice on how this can be done?

Thanks mantis

Edited August 21, 201412 yr by mccloud

This is actually css territory rather than WordPress but you would want to target only the direct children of your nav class like so

.bordermenu > ul > li > a{
	font-size: 18px;
	margin-bottom: 50px;
	padding-bottom: 5px;
        -webkit-transition: .1s all linear;
        -moz-transition: .1s all linear;
        -o-transition: .1s all linear;
        transition: .1s all linear;
}

.bordermenu > ul > li > a:hover{
	border-bottom: 3px solid rgba(255,255,255,1);
}