Skip to main content
R
REELHERO
Inspiring
July 30, 2020
Answered

changing logo on menu activate

  • July 30, 2020
  • 2 replies
  • 3957 views

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 has been closed for replies.
    Correct answer osgood_

    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.

    2 replies

    Just Shoot Me
    Just Shoot Me
    Legend
    August 6, 2020

    Test Reply that is NOT Threaded. Ignore.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    August 6, 2020

    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    O
    osgood_
    Legend
    July 30, 2020

    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.

     

      R
      REELHEROAuthor
      Inspiring
      July 30, 2020

      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

      R
      REELHEROAuthor
      Inspiring
      July 30, 2020

      I guess there must be some conflict going on.

       

      Test just the social icons in a file on their own, without all the other @font-face, just the one which is applicable to the social icons

       

      It works ok for me.

       


      like this?

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

       

      and the "f" for facebook works here..

       

      so something is getting in the way somewhere

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