Overriding parent theme on Menu

  • Hi all. I’m still pretty new at this, but I’m doing my best to educated myself. I’ve created a parent theme for Asokay (supposedly easy to customize). madeleinebee.com

    I’ve changed the menu background color (even though in Firebug it doesn’t seem to know that…). However, when I hover over a menu item, the background reverts back to the parent theme’s color. As you can see, I’ve tried to fix this by changing all of the id’s background colors, but it’s not working.

    /*
Theme Name:     Asokay Child Theme
Theme URI:      https://madeleinebee.com/
Description:    Child theme for the Toolbox theme
Author:         Maddie
Author URI:     https://madeleinebee.com/my-story/
Template:       asokay
Version:        0.1.0
*/

@import url("../asokay/style.css");

/* Menu */

#access{
background:#F08080;
}

#access a{
background:#F08080;
color:white
}

#access ul{
background:#F08080;
}

#access li{
background:#F08080;
}

#access ul ul{
background:#F08080;
}

#access li:hover{
background:#F08080;
}

#access ul ul a:hover{
background:#F08080;
}

#access ul li:hover{
background:#F08080;
}

    Furthermore, when I tried to change #access a{ font color, it would only change after I used the term “white” as opposed to #FFF8F0. What’s up with that?

    I’m sure it’s operator error, so I’d be very appreciative to learn from this. Thank you!!!
    Maddie

Viewing 4 replies - 1 through 4 (of 4 total)

  • It’s this and this

    #access li:hover > a, #access ul ul *:hover > a {
	background: blue;
}

#access ul ul a {
	background: green;
}

    Suggestion when overwrite menu thing from parent, it’s best to do this

    • Copy over the whole block of menu styling from parent theme.
    • Put that whole block in child stylesheet.
    • Overwrite the color, and background color, or else.

    and then remove out whatever properties that never get overwritten, just to save space and keep it clean. Or just leave them all there, it’s okay too.

    Thread Starter Madeleinebee

    (@madeleinebee)

    Thanks, Paulwpxp! That worked (after I applied the background to a couple of other hover conditions) and it’ll definitely help me in the future.

    However, it still did not want to change the #access a font to #FFFFFF, so I just put “white” which did work. Is there a reason for that?

    Some color names are standard, you can just use its name.

    See the lists here
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

    Your first code in the OP has one semicolon gone missing at this

    #access a{
background:#F08080;
color:white
}

    So it might be some error there.

    Otherwise, it would’ve worked with both values white; or #fff;

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Overriding parent theme on Menu’ is closed to new replies.