[Support request] Change color sticky menu and logo when scrolling down

Home Forums Support Change color sticky menu and logo when scrolling down

  • This topic has 9 replies, 3 voices, and was last updated 5 months ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1468296
    Visual D

    Hi

    Is there a way to change the color of the logo and menu in the sticky menu when you scroll down and it sits on white or black color background.

    Here is an example:

    https://ajandco.com.au/

    When you scroll down the menu and logo changes color when the background is different.

    Thanks

    Edwin

    #1468302
    Leo
    Staff
    Customer Support

    Hi there,

    Are you using a merged header element by any chance?

    Let me know πŸ™‚

    #1468319
    Visual D

    Hi Leo

    I am using the Off Canvas Panel menu.

    #1468324
    Elvin
    Staff
    Customer Support

    Hi Edwin,

    Your site seems to be in maintenance mode. Can you give us access so we could inspect the site?

    You can add the site details on the Private Information text area.

    Thanks.

    A wise man once said:
    "Have you cleared your cache?"

    #1468354
    Visual D

    Hi Elvin

    Try now. I removed the Maintenance mode

    #1468366
    Leo
    Staff
    Customer Support

    You are using a merged header element so you can actually set the transparent colors for the static header and navigation within the element under the Site Header tab:
    https://www.screencast.com/t/tW6PQaAX

    Then the sticky navigation color would inherit the colors set in the customizer.

    The result should be similar to this:
    https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

    Let me know if this helps πŸ™‚

    #1468410
    Visual D

    Hi Leo,

    Thanks, but what i am after is that the color of the menu and logo changes when the background of the color change.

    You can see it in the website https://ajandco.com.au/ when it is on top of white background the color of the logo and menu is black and when you are on black background (scroll in page) the menu and the logo is white.

    #1468460
    Elvin
    Staff
    Customer Support

    This is pretty tricky to do.

    Your reference site is pretty complex since it uses scripts to control how the hamburger icon changes.

    This is doable w/ CSS though.

    Try this CSS code:

    nav{
    mix-blend-mode:difference;
    }
    
    button.menu-toggle{
    background-color: transparent;
    transition: background-color 0.3s;
    }
    
    button.menu-toggle > span.icon-menu-bars{
    color:white;
    }

    We’re basically taking advantage of CSS’s mix-blend-mode property as opposed to your reference site’s script controlled swapping headers.

    A wise man once said:
    "Have you cleared your cache?"

    #1468467
    Visual D

    Thanks Elvin.

    That didn’t work. I guess i will have to try it with JavaScript?

    #1469315
    Leo
    Staff
    Customer Support

    This kind of custom solution is out of the scope of this forum unfortunately.

    I think the logo part would be very complicated to achieve.

    You could try hiring a developer using a service like this:
    https://codeable.io/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.