No color change on Level 1 of collapsed menu

  • peterhjalmarsson

    (@peterhjalmarsson)


    10 years ago

    I’m using the code from https://themesandco.com/snippet/change-background-colortext-color-3-bar-menu-dropdown/ to change the background and text colors of the collapsed/responsive menu. It works well, except for the “Level 1” menu text color.

    Exemple site: https://peterhjalmarsson.hopto.org/donostia.se/artiklar/ar-smorrebrod-pintxos/

    CSS:

    /* Responsive Navbar/menu background */
.nav-collapse .nav .nav-header {
font-weight:        bold;
color:              black;    /* Adjust Text Color Level 1 */
text-shadow:        none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
color:              black;   /* Adjust Text Color Level 2 */
text-shadow:        none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
background-color:   none;   /* Adjust Background Color Level 2 */
}
/* Remove the surrounding background */
.nav-collapse.tc-hover-menu-wrapper.in.collapse {
background-color:   white;   /* Adjust Background Color Level 2 */
background-color:   none;      /* Remove this line if setting different background color */
}
/* Remove the separator bars */
.tc-hover-menu.nav a {
border-bottom:      1px solid white;
border-bottom:      none;      /* Remove this line if setting different separator color */
}

Viewing 16 replies (of 16 total)
  • Thread Starter peterhjalmarsson

    (@peterhjalmarsson)

    > Are we talking about how to distinguish between mobile and normal menu?
    I guess that’s one way of putting it. To be precise, we’re talking about changing the appearance of the collapsed/responsive menu, without changing the appearance of the normal menu.

    @d4z_c0nf takes us a little bit further towards the target. Also, there are at least TWO(!) separate collapsed menus.

    1. First is the one we have been mucking about with earlier – see my suggestion two posts up. This actualy changes the presentation in a PC browser (tested with IE and Chrome), shrunk down to a smaller size. Of course, we only have a solution for the background so far, not the text color.

    Also, and this was news to me: it does not work on a mobile (tested on Samsung S5 and Nexus 4, both Chrome browsers)! It works if you request the desktop version of the page though.

    2. Then there’s @d4z_c0nf’s media query method. It works well enough, changing both level 1 and 2 menu items (although I think it was only supposed to change one of them). Also, it works both on a shrunk PC browser and a phone browser.

    Still two issues with it though
    a) It does not change the color of the border-bottom, thus not removing the frames around menu items. Has anyone got a solution for that?
    b) It does some funny things when you activate the collapsed menu on a PC browser, and then size up the browser to non-responsive size. The Level 1 menu items in the regular menu then gets the same appearance as in the collapsed menu. This is not too much to worry about though, since it will very likely not happen very often in normal use.

    I have not tested @d4z_c0nf’s functions.php method.

Viewing 16 replies (of 16 total)
  • The topic ‘No color change on Level 1 of collapsed menu’ is closed to new replies.