Okay
  Public Ticket #1801948
Logo switch color when full menu open
Closed

Comments

  •  3
    PepiteAtelier started the conversation

    Hi dear support ! 

    I used two backgrounds images for my animation logo and they are black. 
    I would like to have my logo in white hover the full menu (in black).

    For the logo hover the menu, i added : 

    .header-logo.logo-image img {
        z-index: 200; }

    For the logo in white when the menu is open, i tried : 

    .fullscreen-menu-is-open .main-header.menu-type-full-bg-menu:visible .header-logo.logo-image img { 
    filter: invert(100%); }

    But it's doesn't work...can you help me please ?

    Thanks,
    Bastien

     

    Attached files:  Logo-black-but-i-want-it-white.png
      Logo-black.png

  •  424
    Arlind replied

    Hi Bastien,

    Can you please share your WP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread. To include your credentials click Insert Credentials button in editor toolbar. (See how)

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •   PepiteAtelier replied privately
  •  646
    Art replied

    Hi there,


    My team mate (Arlind) can help you with this question, but he is not in the office until 5th of December.

    When Arlind comes back, just reply to this thread and you will make sure he will see your comment.

    Thanks for your understanding!

    Kind regards,
    Art


      Documentation        Follow on Envato         Like on Facebook

  •  3
    PepiteAtelier replied

    Thanks Art, 
    No problem i deleted  wp-configfake.php for website's security.

    Welcome back Arlind, i'm listening you ;) 

    Thanks,
    Bastien

  •  424
    Arlind replied

    Hi Bastien,

    I have found a way to make logo appear in white variant by adding this Custom CSS:

    .fullscreen-menu-is-open .logo-column {
        z-index: 10000;
    }
    .fullscreen-menu-is-open .logo-column .header-logo .logo-entry {
        background: url(/wp-content/uploads/2018/11/logo-footer.svg);
    }
    .fullscreen-menu-is-open .logo-column .header-logo .logo-entry img {
        opacity: 0;
    }
    
    And how it appears:

    https://d.pr/v/OepcxC

    I hope you like it.

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •  3
    PepiteAtelier replied

    Hi Arlind, 

    Cool ! It's possible to have the same trick with fullscreen menu in responsive ? 

    Thanks,
    Bastien

  •  424
    Arlind replied

    Hi Bastien,

    Please add this CSS:

    .mobile-menu-container {
    background-image: url(/wp-content/uploads/2018/11/logo-footer.svg);
    background-repeat: no-repeat;
    background-size: 75px;
    background-position: 5% 2%;
    }

    It will work this way:

    https://d.pr/v/CXv8q7

    I hope you like.

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •  3
    PepiteAtelier replied

    Yeah thanks a lot Arlind !
    Have a good day or night (i don't know where you work) ! 

    Kind regards,
    Bastien

  •  424
    Arlind replied

    Hi Bastien,

    Glad to hear that everything is as you wanted now.

    I wish you a great day too

    P.S: If you like the theme, it would help us a lot if you could give us a five-star rating on Themeforest from your Downloads tab.

    A huge thank you from Laborator in advance!

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook