Fixed Menu CSS

  • Author
    Posts
  • #67663

    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!

    #67833
    Zed
    Cryout Creations mastermind

    The theme does not use a ‘telicon’ class, so I’d need to see the site to figure what and how you’re displaying in the menu.

    There’s also a typo in your CSS:
    .teleicon::after {


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #67840

    Hey Zed, thanks for the reply.

    My mistake, ‘teleicon’ in the CSS is correct.

    I have used your “Social Icons” menu in wordpress, and have given the telephone icon the optional CSS class “teleicon” to be able to add additional styles.

    Correcting my stupid typo fixed the problem #facepalm

    Cheers!!

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Fixed Menu CSS’ is closed to new replies.