No color change on Level 1 of collapsed menu

I think the missing selectors are:

.dropdown-menu > li > a
.dropdown-menu > li > a:focus

For example, try:

.dropdown-menu > li > a {
background-color: red;
}

Thanks for the reply Dave!

Unfortunately your suggestion does not work it references the “drop-down” items (i.e. “level 2” items), not the 1st level. Also, it changes both the non-responsive menu and the responsive menu.

I’m a newbie with the elements inspector in Chrome (which should be a way of identifying the correct element I guess), and that did not get me anywhere either. I have found the “dropdown-menu” class for the level 2 items, but not the corresponding class for the level 1 items. ??

Ok, so I had to take the hard route and do some systematic testing with one setting at a time, and the result is:

1. Using “.dropdown-menu > li > a” I get
* Normal menu changes background and text color of Level 2 menu items (as expected)
* Responsive menu changes only background color of Level 2 menu items

2. Using “.nav-collapse .nav > li > a” I get
* Normal menu changes background and text color of Level 1 menu items
* Responsive menu changes background and text color of Level 1 menu items
This not quite what I expected – “.nav-collapse…” should change only the responsive menu, no?

3. Using “.nav-collapse .dropdown-menu > li > a” I get
* Normal menu changes background and text color of Level 2 menu items
* Responsive menu changes background and text color of Level 2 menu items
Again I did not expect that the normal menu would change.

4. Using “.nav-collapse .nav .nav-header” I get
* Nothing happens.

5. Using “.nav-collapse .dropdown-menu a” I get
* Normal menu changes background and text color of Level 2 menu items
* Responsive menu changes background and text color of Level 2 menu items
Again I did not expect that the normal menu would change.

5. Using “.navbar .nav > li > a” (just for the heck of it) I get
* Normal menu changes background and text color of Level 1 menu items
* Responsive menu changes background and text color of Level 1 menu items
I did not expect the responsive menu to change.

These are all the different elements from your Codesnippet (and then some) Dave, and after that I’m stumped. I don’t really want to say this (mostly because I’m sure I will have to eat my words in the end), but it seems like your code snippet is not quite working (maybe a Customizr 3.2 issue?) as intended?

(Btw, the reason I said that “it did not work” in my first post was that I had some CSS code for the regular menu later in the CSS file. Of course, since it seems that all code changes the look of both regular and responsive menus, that overwrote any settings I tried to make to the responsive menu…)

I’m currently in the middle of rewriting the Navbar Guide for 3.2. I’ll check your stuff above to ensure I cover it.

Thanks for such a comprehensive analysis.

Cool, I’ll look forward to it. Any idea on what to do in the meantime? I was hoping to go live on Sunday.

I think i’m too much of a novice to give advice but if i’m understanding you correctly try

.in.collapse

i just cut and paste some of what i’m working with

.sticky-enabled .tc-shrink-on .in.collapse .nav a { color: red;
}

.in.collapse .nav > li.current-menu-item > a { color: yellow;
}

.in.collapse { width: 200px; background-color: #5A5A5A; overflow: visible;
}

.in.collapse .nav a { color: red; text-shadow: none;
}

I’ve been doing my own research based on the Navbar Guide and this is my conclusion. (Not complete but thought worth sharing at this point)

In Czr 3.1.*, there was a very awkward HTML generated double-menu depending on resp/notresp. Nic has simplified it so there is a single menu generated.

The consequence seems to be that you can make settings for either:
1) Full Menu + Collapse Menu
2) Collapse Menu
ie there is no Full Menu only option.

1) is targetted by .navbar .nav
2) is targetted by .navbar .nav-collapse

.nav-collapse and .in.collapse are the same class.

Been trying to think why you would need to treat Full/Collapsed differently anyway?

It’s an interesting exercise that I have to complete before publishing the Navbar Guide.

At the start of this thread, you wanted to target Level 1 items.

.navbar .nav > li > a {
background-color: yellow;
color: red;
}

Sorry, but that does not work for me.

.navbar .nav > li > a {
background-color: yellow;
color: red;
}

does change Full menu + Collapse. Good so far.
But

.navbar .nav-collapse > li > a {
background-color: yellow;
color: red;
}

does not change either Full or Collapse. ?? Neither does “.in.collapse”.

I have learned SOME inspector skills since last time, but when I inspect the collapsed level 1 menu item there are 10+ styles listed, and it’s just too much for me to understand.

> Been trying to think why you would need to treat Full/Collapsed differently anyway?
It’s because the Level 1 menu is rendered in a different place for Full and Collapsed menus. For the Full Menu it is rendered on top of the Navbar (so in my case, white text fits nicely on the red transparent background).
But the Level 1 menu items on the Collapsed menu is rendered on the white semi-transparent drop-down backgound. So the white text does not work well unfortunately.
I could switch to a red transparent background for the Collapsed mennu as well, but then the black text of the Level 2 menu items would hardly be visible. The Full menu renders them on a white drop-down background as standard, and that works very well.

I guess one solution would be to replace my Red Full Menu Navbar with a light one and black text, but that is not the look I’m going for.

So yes, there is a reason for setting Full and Collapsed menu separately. I’m not the only oneby the way, I just looked at the first example in the Customizr showcase (https://international.lancastermennonite.org/). Look at their Collapsed menu – same issue!

@peterhjalmarsson

did you copy and paste and play with the specific .in.collapse that i posted above and have re-posted here?

for the normal header nav i use this

.navbar .nav > li > a { color: orange;
}

for the collapsed nav i use these below because i want different looks in each scenario

it should work

.sticky-enabled .tc-shrink-on .in.collapse .nav a { color: red;
}

.in.collapse .nav > li.current-menu-item > a { color: yellow;
}

.in.collapse { width: 200px; background-color: #5A5A5A; overflow: visible;
}

.in.collapse .nav a { color: red; text-shadow: none;
}

@web Tabula Rasa: I had not before, butI’ve tried it now, but it did not help. I did get the layout-related stuff to work, but not the font-related stuff. ??

@rdellconsulting, have you had any time to look more at this?

Nic has been rather busy and not had time to help me. Hoping he can help now that 3.2.7 is out of the way. Haven’t forgotten you!

I have also been having the same issues with the updates since 3.2.7 and 3.2.8 with several sites which I maintain.

With all of the sites, the customizations to the background colors to the navbar are no longer working correctly.

@rdellconsulting, do you have an anticipated release for your update to the Navbar Guide?

Unfortunately, I’m waiting for Nic to help me out and he’s rather busy at moment. If you post a thread with your problem(s), I’ll try to help you fix.

@bill-monkeytree: Actually, I got the background colors in the collapsible menu to work reasonably well – at least I can get a uniform background color with:

.nav-collapse.tc-hover-menu-wrapper.in.collapse {
background-color:   hsl(0, 88%, 62% );
}
/* Remove the separator bars */
.tc-hover-menu.nav a {
border-bottom:      hsl(0, 88%, 62% ); /* Samma f?rg som bakgrunden ovan */
}

This does not effect the non-responsive menu at all, only the responsive one, so that’s good.
Still no luck on setting the font color separately though. Maybe someone more familiar with the object model(?) than me can figure out the right code for the font color?

Maybe I didn’t get the issue.
Are we talking about how to distinguish between mobile and normal menu?
If yes, then you can use media queries:

/* this will affect just li a elems of mobile menu */
@media (max-width: 979px){
    .navbar .nav-collapse .nav li a {
        background: yellow;
        color: white;
    }
}

But if you want a css class to identify the mobile menu you can add this to your child-theme functions.php:

add_action('wp_footer', 'mobile_menu', 9999);
function mobile_menu(){?>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            ! function($){
                "use strict";
                var $mobile_menu = $('.navbar-inner button.btn-navbar'),
                    $navbar = $('.navbar-wrapper .navbar');

                function toggleMobileMenuClass(){
                    if ( $mobile_menu.is(":visible") && ! $navbar.hasClass("mobile") ){
                        $navbar.addClass("mobile");
                    }else if ( ! $mobile_menu.is(":visible") && $navbar.hasClass("mobile") ){
                        $navbar.removeClass("mobile");
                    }
                }

                toggleMobileMenuClass();
                $(window).resize(function () {
                    toggleMobileMenuClass();
                });
            }(window.jQuery);
         });
    </script>
<?php
}

and then styling it using:
.navbar.mobile .nav-collapse

should work.

Hope this helps.