WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS3 fade effect menu doesn't work on child theme (7 posts)

  1. frenchsam
    Member
    Posted 1 year ago #

    Hi there,

    I just made a child theme from twentyten.

    I've a drop-down menu which appears in fade transition with CSS3.

    Everything works except the fade effect on my style.css child-stylesheet.

    I tried to put the "css menu code" in parent-css-stylesheet and fade effect come back.

    How can I manage to make it work in child theme ?

    here's the ccs code :

    #cssmenu ul { margin: 0; padding: 0;}
    #cssmenu li { margin: 0; padding: 0;}
    #cssmenu a { margin: 0; padding: 0;}
    #cssmenu ul {list-style: none;}
    #cssmenu a {text-decoration: none;}
    #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4); display: block; float: left; margin: 0 auto; width: 940px;}
    
    #cssmenu > ul > li {
        float: left;
        margin-left: 15px;
        position: relative;
    }
    
    #cssmenu > ul > li > a {
        color: rgb(160,160,160);
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        padding: 15px 20px;
    -webkit-transition: color .15s;
       -moz-transition: color .15s;
         -o-transition: color .15s;
            transition: color .15s;
    }
    
    #cssmenu > ul > li > a:hover {color: rgb(205,113,36); }
    
    #cssmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: rgb(250,250,250);
        text-align: left;
        position: absolute;
        top: 55px;
        left: 50%;
        margin-left: -90px;
        width: 180px;
    -webkit-transition: all .3s .1s;
       -moz-transition: all .3s .1s;
         -o-transition: all .3s .1s;
            transition: all .3s .1s;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
            box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    }
    
    #cssmenu > ul > li:hover > ul {
        opacity: 1;
        top: 65px;
        visibility: visible;
    }
    
    #cssmenu > ul > li > ul:before{
        content: '';
        display: block;
        border-color: transparent transparent rgb(250,250,250) transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px;
    }
    
    #cssmenu > ul ul > li { position: relative;}
    
    #cssmenu ul ul a{
        color: rgb(50,50,50);
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: rgb(250,250,250);
        padding: 5px 8px 7px 16px;
        display: block;
    -webkit-transition: background-color .1s;
       -moz-transition: background-color .1s;
         -o-transition: background-color .1s;
            transition: background-color .1s;
    }
    
    #cssmenu ul ul a:hover {background-color: rgb(240,240,240);}
    
    #cssmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: rgb(250,250,250);
        text-align: left;
        width: 160px;
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
       -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
            box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    }
    
    #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
    
    #cssmenu ul ul a:hover{
        background-color: rgb(205,113,36);
        color: rgb(240,240,240);
    }

    Thanks you for help !

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Perhaps use more specific selectors.

  3. frenchsam
    Member
    Posted 1 year ago #

    Thanks for your help Andrew. That's the deal.

    You remind me that the parent stylesheet still have basic code menu, I commented it, and the fade effect come back, called by child stylesheet.

    Now my problem is : I don't want to touch the core of the theme, and I don't know how to use more specifics selectors (I didn't code this menu, I'm a neophyte)

    What can I do then ? (That answer makes my almost making fun of myself...)

    I apologize for bad english, that's not my native langage.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you post a link to your site, someone can likely give you specific help. Otherwise, look up how CSS selectors work, and try using Firebug to help you identify the code to use.

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    For example, these are more specific selectors

    body header #cssmenu ul ul a {

    I don't actually know your HTML structure so the above example is likely to be wrong and still not specific enough.

    Here's an article on CSS specificity.

    I don't know if you're using a Browser Inspector Tool (e.g Firebug) already to find your HTML & CSS easily, are you?

  6. frenchsam
    Member
    Posted 1 year ago #

    @WPPyogi : hi. I've installed "Absolut Privacy" plugin because the site still in development but there're login ID :

    http://www.grossebanane.net16.net/

    username : guest
    pw : test

    Yes I actually use the native "Firebug" in Google Chrome

    @Andrew : I know some things about developpement, and I know what selectors are, but in that case with child-parent theme I'm kinda disappointed. Have a look on my site if you have time.

    nb : I've restored the parent css. Then the fade effect doesn't work.

    Thanks for helping !

  7. frenchsam
    Member
    Posted 1 year ago #

    I finally find out how to do, thanks for your help !

Topic Closed

This topic has been closed to new replies.

About this Topic