Fixed Menu CSS

Hi all,

How is it possible to add some additional CSS for the fixed menu items only?

I can change the upper menu no problems, but the fixed menu doesn’t follow suit.

I’ve added some text to after one of the social icons, using ::after. the text is white at first, but should turn grey as you begin to scroll, and the menu bar turns white the text should become dark grey.

/*Menu Start*/
#masthead #site-header-main:hover{
    background:#fff;
}
#masthead #site-header-main:hover a{
    color:#333;
}

#masthead #site-header-main a:hover{
    color:#009FE3;
}
#masthead #site-header-main:hover a::before {
    color:#333;
}
#masthead #site-header-main:hover .teleicon::after { 
        color:#333;
}
#masthead #site-header-main:hover a:hover.teleicon::after { 
        color:#009FE3;
}
#masthead #site-header-main:hover a:hover::before {
    color:#009FE3;
}
#masthead #site-header-main.header-fixed a.telicon::after{
    color:#333!important;
}
.teleicon::after { 
    content: "   some text here";
    font-family:Open Sans;
    font-size:90%;
    font-weight:700;
    color:#fff;
}
/*Menu End*/

It is this section in particular that is not working;

#masthead #site-header-main.header-fixed a.telicon::after{
    color:#333!important;
}

I know I’m cheating with !important, but just trying to get it to function first!

Thanks!