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

Comments

  •  3
    PepiteAtelier started the conversation
    November 29, 2018 at 12:00pm

    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

     

  • [deleted] replied
    November 30, 2018 at 8:04am

    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)

  •   PepiteAtelier replied privately
  •  1,559
    Laborator replied
    December 3, 2018 at 12:34pm

    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!

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  3
    PepiteAtelier replied
    December 5, 2018 at 9:01am

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

    Welcome back Arlind, i'm listening you ;) 

    Thanks,
    Bastien

  • [deleted] replied
    December 5, 2018 at 11:40am

    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.

  •  3
    PepiteAtelier replied
    December 5, 2018 at 1:08pm

    Hi Arlind, 

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

    Thanks,
    Bastien

  • [deleted] replied
    December 6, 2018 at 8:07am

    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.

  •  3
    PepiteAtelier replied
    December 6, 2018 at 9:14am

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

    Kind regards,
    Bastien


  • [deleted] replied
    December 6, 2018 at 2:34pm

    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!