Change menu colors

  • Resolved tuviaserber

    (@tuviaserber)


    9 years, 1 month ago

    Hi, I’m trying to change the colors of the menu of your theme PATH, using a child theme. You can see what I’m doing at https://www.jabadlaplata.org.ar (in spanish).

    I’m having the following problem:
    When I change the background color of the secondary menu (the only one I’m using) and the color of the text, it comes out that when you hover the menu, it looses the functionality of changing the current item color to white.

    I’m not sure if I’m making myself clear, so I’ll give you an example:
    In my website, go to menu “Nosotros” and a drop down list is going to appear. When you browse the list, each item becomes white. That’s great!
    Now, if I change the color of the menu from red to black, for instance, then the functionality of the curent item turning white is lost.

    I tried to twinkle the styles.css file in my child theme with no success…

    I’d like the menu to be black text, when an item is selected, the background of that item on black, with white text.

    Could you help me? Thank you!!

Viewing 15 replies - 1 through 15 (of 17 total)

  • Hi
    This is the class for your first level elements for hover

    #menu-secondary li.current-menu-item a, #menu-secondary li a:hover, #menu-secondary li.sfHover a

    and this is the class for dropdown menu

    #menu-secondary li li a, #menu-secondary li.sfHover li a, #menu-secondary li li.sfHover li a

    Thread Starter tuviaserber

    (@tuviaserber)

    OK! Thank you for the quick response. I changed the CSS to the following (in child theme):
    /* First menu item */
    #menu-secondary li.current-menu-item a,
    #menu-secondary li a:hover,
    #menu-secondary li.sfHover a {
    background: #e9edf1 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    }

    /* Dropdown menu */
    #menu-secondary li li a,
    #menu-secondary li.sfHover li a,
    #menu-secondary li li.sfHover li a {
    background: #e9edf1 !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #ca4842;
    border-bottom: 1px solid #fff;
    padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
    }

    Colors are fine, however the problem persists: the menu item under the mouse should have background in white, while the others the light blue.

    Please see https://www.jabadlaplata.org.ar for example of this behavior.

    Thread Starter tuviaserber

    (@tuviaserber)

    If I change the second CSS to:
    /* Dropdown menu */
    #menu-secondary li li a,
    #menu-secondary li.sfHover li a,
    #menu-secondary li li.sfHover li a {
    background: #ffffff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #ca4842;
    border-bottom: 1px solid #fff;
    padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
    }

    All the menus under the main menu item become white….

    Ok to make things simple if i understand

    By default the menu has background color: white and text color: blue
    when u hover your mouse the background color should become : black and text color: white?
    (and it should behave the same way for dropdown menu as well)?

    Thread Starter tuviaserber

    (@tuviaserber)

    I’d prefer the following:
    Default: menu background white, text blue. The selected menu should be background light blue, same text color.
    When you hover over a dropdown item, the text should be blue and the background white. However this should only apply to the item right under the mouse, the rest of the dropdown should be background light blue and text blue.

    Hope I’m being clear….

    Ok so i see in your stylesheet there are same classes for secondary menu having multiple color/background color, hence when u change it in one place it doesnt really do anything.
    so first make sure your all classes r not duplicated.
    you should do something like what i have done here, (change the colors as u want)

    #menu-secondary li a {
	color: blue;
	background-color: #fff;
	font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0.363636364em; /* 4px / 11px = 0.363636364 */
	padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182  */
	text-transform: uppercase;
}
#menu-secondary li li a {
	margin-bottom: 0;
}
#menu-secondary li li {
	margin-left: 0;
}
#menu-secondary li.current-menu-item a,
#menu-secondary li a:hover,
#menu-secondary li.sfHover a,
#menu-secondary li li.current-menu-item a,
#menu-secondary li li.sfHover li.current-menu-item a,
#menu-secondary li li a:hover,
#menu-secondary li li.sfHover a,
#menu-secondary li li.sfHover li a:hover   {
	background-color: light-blue;
	color: blue;
}
    Thread Starter tuviaserber

    (@tuviaserber)

    Hi there,
    I tried your code, no results though. I’m not sure how to check for duplicate entries in the CSS, since I left the original CSS that comes with the Theme untouched, and just added my own CSS in the child directory with the entries I’d like to modify.

    I’m adding here the original code from the style.css of the Theme:
    For reference:
    #ca4842 = red
    #e9edf1 = grey
    #404040 = dark grey

    /* Menu secondary. */
    #menu-secondary {
    display: block;
    padding: 0 2% 1em;
    width: 96%;
    height: 2em; /* 32px / 16px = 2 */
    }
    #menu-secondary .wrap {
    margin: 0 auto;
    }
    #menu-secondary ul {
    padding: 0;
    }
    #menu-secondary li {
    display: inline;
    margin-left: 1em;
    }
    #menu-secondary li:first-child {
    margin-left: 0;
    }
    #menu-secondary li a {
    color: #ca4842;
    font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
    letter-spacing: 1px;
    margin-bottom: 0.363636364em; /* 4px / 11px = 0.363636364 */
    padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182 */
    text-transform: uppercase;
    }
    #menu-secondary li li a {
    margin-bottom: 0;
    }
    #menu-secondary li li {
    margin-left: 0;
    }
    #menu-secondary li.current-menu-item a,
    #menu-secondary li a:hover,
    #menu-secondary li.sfHover a {
    background: #ca4842;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    }
    #menu-secondary li a:hover,
    #menu-secondary li.sfHover a {
    text-decoration: none;
    }
    #menu-secondary li li a,
    #menu-secondary li.sfHover li a,
    #menu-secondary li li.sfHover li a {
    background: #e9edf1;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #ca4842;
    border-bottom: 1px solid #fff;
    padding-left: 1.81818182em; /* 20px / 11px = 1.81818182 */
    }
    #menu-secondary li li.current-menu-item a,
    #menu-secondary li li.sfHover li.current-menu-item a {
    color: #404040;
    }
    #menu-secondary li li a:hover,
    #menu-secondary li li.sfHover a,
    #menu-secondary li li.sfHover li a:hover {
    background: #fff;
    color: #404040;
    }

    /* Drop-down styles. */
    #menu-secondary li:hover ul,
    #menu-secondary li.sfHover ul {
    top: 2.0625em; /* 33px / 16px = 2.0625 */
    }
    #menu-secondary li:hover li ul,
    #menu-secondary li.sfHover li ul {
    top: -999em;
    }
    #menu-secondary li li:hover ul,
    #menu-secondary li li.sfHover ul {
    margin-left: 0;
    padding-bottom: 0;
    top: 0;
    }

    /* Sub-nav indicator. */
    #menu-primary ul .menu-item-parent > a:after,
    #menu-secondary ul .menu-item-parent > a:after {
    content: "02B"; /* Plus sign. */
    float: right;
    padding-left: 8px;
    padding-left: 0.5rem;
    position: absolute;
    }
    #menu-primary ul .menu-item-parent > a,
    #menu-secondary ul .menu-item-parent > a {
    padding-right: 24px;
    padding-right: 1.5rem;
    }
    #menu-primary ul ul .menu-item-parent > a:after,
    #menu-secondary ul ul .menu-item-parent > a:after {
    position: static;
    }
    #menu-primary ul ul .menu-item-parent > a,
    #menu-secondary ul ul .menu-item-parent > a {
    padding-right: 8px;
    padding-right: 0.5rem;
    }
    .

    I do see duplicate entries, but they modify each one a different attribute. Don’t know…

    Any idea?

    Would need to jump in on code, as its not easy to debug just from dev tools.

    Thread Starter tuviaserber

    (@tuviaserber)

    Ok, what do you think I should do? Any ideas?

    Add me to admin and i can look into it

    Thread Starter tuviaserber

    (@tuviaserber)

    I can’t do that… my supervisor will kill me if I do that…. sorry. Can I send you by email the files of the theme + the child theme?

    no problem

    Thread Starter tuviaserber

    (@tuviaserber)

    OK! I’ve got it! Here comes the solution: I had to separate some css definitions. Not shure exactly how they work all together, but I tested using weird colors (like green and violet) until I found out which definition is doing what. Here’s the final code:

    /* Menu */
#menu-secondary {
        display: block;
        padding: 0 2% 1em;
        width: 96%;
        height: 2em; /* 32px / 16px = 2 */
	background: #ffffff !important;
}

#menu-secondary li a {
        color: #000000 !important;
        font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
        letter-spacing: 1px;
        margin-bottom: 0.363636364em; /* 4px / 11px = 0.363636364 */
        padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182  */
        text-transform: uppercase;
}

#menu-secondary li.sfHover a {
        background: #ca4842;
	color: #ffffff !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

#menu-secondary li.current-menu-item a {
        background: #000000 !important;
	color: #ffffff !important;
}

#menu-secondary li a:hover {
        background: #000000 !important;
	color: #ffffff !important;
	font-weight: bold;
}

#menu-secondary li.sfHover a {
        background: #000000 !important;
        color: #ffffff !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

/* Menu mobile */
#menu-secondary-title a {
        background: #000000 !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        color: #fff !important;
        font: normal normal normal 0.6875em/1.2em Arial, Verdana, sans-serif;
        letter-spacing: 1px;
        padding: 0.909090909em 1.81818182em; /* 10px / 11px = 0.909090909 and 20px / 11px = 1.81818182  */
        text-transform: uppercase;
}

    You can see that the lines that have !important are the added or modify lines. Also the mobile menu has to be changed, to keep consistency.

    Thank you Robin for the tips and time!!!!

    Thread Starter tuviaserber

    (@tuviaserber)

    Sorry, forgot to point out that the main line is:

    #menu-secondary li a:hover {
        background: #000000 !important;
	color: #ffffff !important;
	font-weight: bold;
}

    This line modifies the menu when you are on top of it.

    perfect ?? glad it worked out ??

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Change menu colors’ is closed to new replies.

Tags