4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Wordpress Navigation Issue - Please help?

by willyboy104
3 replies
  • WEB DESIGN
    • |
Hi all,

I have a custom menu set up on my Wordpress site for a guide section of the site that you can find here:

Disney Infinity Guide - i <3 infinityi <3 infinity - Disney Infinity News & Disney Infinity Characters

My issue is that when I add sub-pages to any page on the menu, that specific page will stop working, it will no longer allow me to click through to the page as the title instead acts like a click to a drop down menu for the sub page instead.

My question is, is there a way of allowing the menu title to act as both a drop down and a hyperlink to that actual page...because right now it makes things very difficult.

For example - click on 'Disney Infinity Power Discs' > Disney Infinity Power Discs Series 1, 2 and 3 should all be clickable to the page but because of the sub pages in 'Disney Infinity Power Disc Series 1' I can no longer access it.

Any help would be massively appreciated!

I also need some design work, so whoever helps solve this, we can discuss that work also!

Thanks!
#issue #navigation #wordpress
  • Profile picture of the author joe ferdinando
    After looking at the source code to you page at
    Disney Infinity Power Discs Guide - i <3 INFINITYi <3 infinity - Disney Infinity News & Disney Infinity Characters

    I found on your sub menus not all link have a closing tag for the li tag
    That is why the link is not working!

    Code:
    <ul class="sub-menu">
	<li id="menu-item-2263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2263"><a href="http://www.iheartinfinity.com/guide/disney-infinity-power-discs/series-1-power-discs/" >Disney Infinity Power Discs Series 1</a>
    the following should be

    Code:
    <ul class="sub-menu">
	<li id="menu-item-2263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2263"><a href="http://www.iheartinfinity.com/guide/disney-infinity-power-discs/series-1-power-discs/" >Disney Infinity Power Discs Series 1</a></li>
    I found all menu items that drop down and do not hyperlink are the same and missing the li closing tags!

    This is from your top working menu to show you the working menu with the closing tags:

    Code:
    <li id="menu-item-2288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2288"><a href="http://www.iheartinfinity.com/game-info/" >Game Info</a>
<ul class="sub-menu">
	<li id="menu-item-2295" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2295"><a href="http://www.iheartinfinity.com/characters/" >Characters</a></li>
	<li id="menu-item-2824" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2824"><a href="http://www.iheartinfinity.com/disney-infinity-crystal-characters/" >Crystal Characters</a></li>
	<li id="menu-item-2291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2291"><a href="http://www.iheartinfinity.com/disney-infinity-trading/" >Power Disc Trading</a></li>
	<li id="menu-item-2290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2290"><a href="http://www.iheartinfinity.com/disney-infinity-prices/" >Compare Prices</a></li>
	<li id="menu-item-2289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2289"><a href="http://www.iheartinfinity.com/disney-infinity-help/" >Need Help?</a></li>
    Hope this helps!
    Signature
    Ferdiworks.com
    {{ DiscussionBoard.errors[8833787].message }}
  • Profile picture of the author nettiapina
    That's the way your menu is programmed to work. Usually mouseover triggers the submenu dropdown, and clicking takes you to the page. Of course it's possible to change that, but it might not be easy.

    If you think from the user interface point of view it's a bit problematic for the same element to have two functions that are triggered by the same user action (clicking on the menu). For example, you could have the little arrow act as the "show menu" button, but that might just confuse your users.

    If you'd disable that "click to menu drop down" the link would take you to the page. You could then show the current menu location and relevant sub pages in the menu. Your menu should show current location regardless of the functionality, and it currently does not.
    Signature
    Links in signature will not help your SEO. Not on this site, and not on any other forum.
    Who told me this? An ex Google web spam engineer.

    What's your excuse?
    {{ DiscussionBoard.errors[8833797].message }}
  • Profile picture of the author bhuthecoder
    try css for menus instead javascript.

    1)put this code in your css file

    Code:
    .cc-left ul.menu > li{
 position: relative;
}
.cc-left ul.menu > li:hover > ul,
.cc-left ul.menu ul.sub-menu > li:hover > ul {
    display: block;
}
.cc-left ul.menu ul.sub-menu {
    display: none;
    left: 100%;
    position: absolute;
    top: 0;
    width: 280px;
}
    2)remove the javascript code

    Code:
    $('.cc-left ul.menu li  a').click(function(e){
 = $(this).next('.sub-menu')
if ( . length > 0) {
    // Dsiabel click 
    e . preventDefault();
}
$(this) . next('.sub-menu') . toggle('slow');
$(this) . parent() . toggleClass('cir-active');

if($(this).hasClass('cir')){
    $(this).addClass('min');
    $(this).removeClass('cir');
} else {
    $(this) . addClass('cir');
    $(this) . removeClass('min');
}
});
    {{ DiscussionBoard.errors[8833929].message }}

Trending Topics