Skip to main content
REELHERO
Inspiring
Jul 30, 2020 4:20 AM UTC
Answered

changing logo on menu activate

i have a burger menu with an overlay -

http://toddheymandirector.com/reel/index_burger7.html

 

i need the black logo to disappear (revealing the white) when the overlay activates - 

 

i tried }
.button_container:active .th_logo_black {
opacity: 0;

 

not working - any ideas?

    This topic is closed to new replies. Start a new post to keep the conversation going.
    osgood_Correct answer
    Legend
    Aug 4, 2020 10:30 AM UTC

    Javascript is needed for a delay:

     

    Amend the css to as below:

     

    .footer_slide_up {
    position:fixed;
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 25px 0;
    bottom: 0;
    transform: translateY(100%);
    transition: all 1s ease;

    }

    .slideUp {
    transform: translateY(0);
    }

    .footer_slide_up a {
    font-family: dosisregular;
    color: #404040;
    font-size: 1.7em;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    }
    .footer_slide_up a:hover {
    color: #000;
    }

     

     

     

    Then add the javascript delay: (this is set for 3 seconds)

     

    <script>

    setTimeout(function() {
    document.querySelector('.footer_slide_up').classList.add('slideUp');
    }, 3000);

    </script>

     

     

     


    Actually you dont need Javascript for the delay, you could just use the 'animation-delay' css property. Add the two css properties, marked in red below, to the existing 'footer_slide_up' css selector:

     

    .footer_slide_up {
    position:fixed;
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 25px 0;
    bottom: 0;
    animation: slideup 1s forwards;
    animation-delay: 2s;
    transform: translateY(100%)
    }

     

     

    Avoid Javascript where you can use css instead, makes it all more streamlined.

    View reply

    38 replies

    Just Shoot Me
    Just Shoot Me
    Legend
    Aug 6, 2020 10:30 AM UTC

    Test Reply that is NOT Threaded. Ignore.

    Translate
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    Aug 6, 2020 2:23 PM UTC

    This number plate was recently cancelled in Victoria Australia declaring it offensive:

    The plates spell out the word ‘weapon’ in four letters: ‘WEPN’.

     

    I womder how long it will be when the PC's will condemn your screen name.

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    osgood_
    Legend
    Jul 30, 2020 8:47 AM UTC

    Youre suffering from a lot of z-index nonsense:

    z-index: 999999999999999999999999999999999999999999999999999999999999;

     

    Add the below to your css styles: (I don't have time to work out your z-index issues so I have applied a z-index to the hamburger which will move that to the top of the stack.

     

    #toggle {
    position: absolute;
    z-index: 200000000000000000000000000000000000000000000000000000;
    }
    .showHide{
    display: none;
    }

     

    Then add the javascript block of code below directly before the closing </body> tag of your page.

     

    <script>
    const toggle = document.querySelector('#toggle');
    const blackLogo = document.querySelector('.th_logo_black');
    toggle.onclick = function() {
    blackLogo.classList.toggle('showHide');
    }
    </script>

     

     

     

    You really need to sort out the z-index issue so the code is manageable.

     

    Translate
      REELHEROAuthor
      Inspiring
      Jul 30, 2020 2:54 PM UTC

      you rock thank you!

      (you helped a long time ago on an issue and i was very grateful..)

       

      yeah the z-index - that was me just being frustrated that I couldnt work out the issue so i just went nuts on the 'Zs" i promise i will clean it up when I get it all to work..

       

      i have one other issue (one of the catalysts that caused me to start the Z mania) my rollover on the thumnails are not operating normally..

       

      here is them functioning normally on my current site

       

      http://toddheymandirector.com/reel/

       

      on the test page they only operate hover-off -

       

      http://toddheymandirector.com/reel/index_burger7.html

       

      something about the overlay is conflicting and Im not sure what..

       

      again thank you! i promise i will clean up the code when Im done

      Translate
      REELHEROAuthor
      Inspiring
      Jul 30, 2020 3:14 PM UTC

      apologies i forgot - theres one more glitch Im encountering-- ( i promise i wont be greedy with your time)

       

      the social media icon font on the overlay breaks when i add links-

       

      http://toddheymandirector.com/reel/index_burger7a.html

       

      but works fine without a link- ive tried starting with the link.. no go

      ive seen others have the issue but never found a solution

       

       

       

      Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices