[SOLVED] Menu tab background changes with ncleanblue menu

[twwitt]

I have an irritating problem with my navigational tab backgrounds, using the menu system that comes with the ncleanblue core template and stylesheet. I'm using CMSMS 2.1.2

Problem: For some of the main (first level) tabs, I use Internal Page Links instead of actual Content pages. The navigational tabs for actual Content pages and their subpages are behaving correctly (i.e. the tab background turns a different color when on an active page (or subpage thereof).

However, the navigational tabs for any subpage of an Internal Page Link doesn't not correctly change background colors.

I've used this same navigation menu, in the same way, a couple of times with CMSMS 1.+ versions and haven't had the problem I'm having now. I'm comparing stylesheets with one from CMSMS 1.+ and don't see anything different.

I've tried looking at the CSS and still can't figure out what's wrong. I think it has to do with this section of code below, but can't figure out what's wrong:

.page-menu ul#primary-nav li a.menuparenth,
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
background-position: 100% -120px;
}
.page-menu ul#primary-nav li a {
background-position: 100% -80px;
}
.page-menu ul#primary-nav li a.menuactive span,
.page-menu ul#primary-nav li a:hover span,
.page-menu ul#primary-nav li a:focus span,
.page-menu ul#primary-nav li a:active span {
background-position: 0 -40px;
}
.page-menu ul#primary-nav li a span {
background-position: 0 0;
}

Here's link to actual page: http://new.coralvilleumc.org/

Any ideas for me?

[velden]

It would be good to know which browser(s) you see this behavior and what behavior (e.g. colors) you would expect.

Using a web inspector (available in the mainstream browsers) should help you find out what's happening.

[twwitt]

It happens on Firefox, Chrome, IE etc...I've tried using an inspector but keep getting confused.

The menu is behaving correctly EXCEPT for when the menuparent represents an Internal Link content type instead of an actual Content page.

So, inotherwords, when you click on the tab "Contact", the menu behaves correctly (tab turns blue when you're on that page) because "Contact" is an actual page.
But, if you click on the tab "Grow" (or any of the subpages below that), the tab stays red rather than turning blue, because "Grow" is an Internal Link. I expected the menu tab background to turn to blue...which is what it does on another site running CMSMS 1+.

I know that the changing of the background color is done by moving around the background position of the background image (tabs.gif)...It's all behaving correctly except where the menuparent is an Internal Link instead of a Content page.

[velden]

Active 'Internal Link' html:

Code: Select all

<li class=" parent menuparent">
        <a href="http://new.coralvilleumc.org/index.php?page=kids.connect" class=" parent menuparent"><span>Grow</span></a>
                  <ul class="unli">
...

Active 'normal menu' html:

Code: Select all

<li class=" menuactive">
        <a href="http://new.coralvilleumc.org/index.php?page=contact-us" class=" menuactive"><span>Contact Us</span></a>
              </li>

Note that the 'Internal Link' gets a 'parent' class and the 'real page' gets 'menuactive'. You should be able to find that in the Menu Manager/Navigator template.

Either change that template to set the 'menuactive' class for 'internal links too' or the attached stylesheet to use the same background-effect for .parent classes as for .menuactive classes.

[twwitt]

Thanks. That was helpful. Had to play around in the css for a little while (css within menu systems always confounds me). But changing the background for both .parent and .parent span did it.

Marking as solved. Thanks for your help!