Need help with navigation menu...

by 7 replies
8
Is there anyone out there who can fix a coding bug in my navigation? I'll be happy to "buy you a beer!"

Here's the test page:

About Breatheasy Slow Breathing With Music

You'll notice that I have two "current" navigation tabs. That's just because I was experimenting. The problem is that the dropdown tabs are carrying over the background from the current one above. I want them to be identical to the ones you see under "More Info".

Even the template this site comes from has the same problem.

Speaking of templates, I adapted this site from a WP theme (later I'll set it up as a WP site). Anyway I ripped the navigation code from the WP theme and it's probably far more complicated than it needs to be.

But aside from that it looks good and works good, except for this one bug of course!

If you have any time available (everyone's lounging around for Christmas, aren't they? let me know what it will take to fix this.

Otherwise... Happy Christmas!
#website design #menu #navigation
  • Hi,

    Something I noticed about the menu items that were not performing correctly is that they had the 'current-cat' list item preceding or encapsulating them.

    Remove these and the closing </li> and you should see the right results.

    Alternatively update your .css file to allow for these <li></li> list items.

    <li class="current-cat">
    <a title="The Breakthrough" href="lower_blood_pressure_breathing_breakthrough. html">The Breakthrough</a>
    <ul class="children">
    </ul>
    </li>

    Hope this helps,

    Si
  • Site is looking good to me :-)
  • Now that there's a little breather between holidays I wonder if anybody could take on this problem of mine for a nice cold beer?

    Thanks for your suggestions, ultraburner, but I haven't been able to make it work.
    • [1] reply
    • Edit your CSS file - the one called index.css - and replace the following lines:

      HTML Code:
      #cats li.current-cat a, #cats li a:hover {
    color: #38666E;
    /*color: #E5761C;*/
    line-height: 31px;
    background: transparent url(images/cat_a.png) repeat-x left center;
}
      with these lines:

      HTML Code:
      #cats li.current-cat a {
    color: #38666E;
    /*color: #E5761C;*/
    line-height: 31px;
    background: transparent url(images/cat_a.png) repeat-x left center;
}
#cats li.current-cat ul a {
        background:none;
    color: #bedde2;
}
      That gets rid of the background on the submenu items. It also makes the link color of the submenu items the same as the link color of the submenu items which are not under the "current" category (not sure if you were asking for that though).

      I haven't tested it in Internet Explorer yet, but it doesn't look like there's anything there which IE would fuss over.
      • [1] reply
Join the discussion

Next Topics on Trending Feed