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

changing logo on menu activate

  • July 30, 2020
  • 2 replies
  • 3977 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

      O
      osgood_
      Legend
      August 2, 2020

      hi osgood - the site is up

      http://toddheymandirector.com/

       

      (i havent corrected the Z-space yet but I will as soon as i get this to work)

       

      the only thing that isnt working is the overlay doesnt function on my movie player:

       

      http://toddheymandirector.com/reel/movies/nike_the_getaway/index_new2.html

       

      I added our js and css but its not working - what am I missing?


      I really have no idea other than it is probably as a result of the addition of the media player, perhaps the css for that component is blocking the overlay.

       

      I'd start by going through the movie component css, comment it out then uncomment it, line by line, and see at what stage it breaks the overlay.

       

      Maybe also comment out the javascript for the movie component and re-introduce that one at a time to check if that is having any influence on the overlay.

       

      So really just start by adding the movie component html to the page, then start adding the movie css back and then the javascript. Test each time you add something back.

       

      The actual overlay IS working for me when I test locally BUT the movie component is not positioned correctly so I assume Im not getting something as a result of testing it locally, which is making it not possible for me to replicate the issue.

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