Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. Making sitetitle (in svg) and nav burger (in svg) changing colour depending on the row.

Making sitetitle (in svg) and nav burger (in svg) changing colour depending on the row.

Scheduled Pinned Locked Moved Bug Reports
4 Posts 3 Posters 183 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Z Offline
    Z Offline
    zochovsky
    wrote on last edited by
    #1

    Hi @arminunruh and @Richard-K

    I was wondering whether you could help me?

    On my site (in the mobile viewport), I’m trying to set up a sitetitle (in svg format) and a menu nav (burger in svg) to change colour as your scroll between black and white backgrounds/rows. I’ve managed to almost make it work but the problem is that the logo and nav don’t change the colour immediately after entering into the relevant row. You need to scroll up or down a little bit in a opposite direction to make it switch colours. Could you advise how can I make it work in a smoother fashion?

    Here is the link: http://foi.elmot.atthouse.pl/information

    The logo and the nav should change the colour from black to white immediately after entering the black background and then reverse it when you scroll back to the white background.

    This apparently is working flawlessly on Android devices at the moment, but not in Safari on iPhone 7 (iOS 14.2).

    Many thanks in advance

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear @zochovsky

      What is the code you are using? :)

      Best wishes and Seasons Greetings
      Richard

      1 Reply Last reply
      0
      • Z Offline
        Z Offline
        zochovsky
        wrote on last edited by
        #3

        Hey @Richard-K

        Thanks for getting back to me on this.

        Here is the code:

        $('body').on('mousewheel touchmove', function(){
        if($('.black').length){

                var windowOffset = $('.black').offset().top - $(window).scrollTop() - 19;
                
                if(windowOffset <= 0){
                    $('.mobile-title svg path').css('fill', "#fff");
                    $('.bread-crust-top').css('background', "#fff");
                    $('.bread-crust-bottom').css('background', "#fff");
                } else {
                    $('.mobile-title svg path').css('fill', "#000");
                    $('.bread-crust-top').css('background', "#000");
                    $('.bread-crust-bottom').css('background', "#000");
           }
        }
        

        });

        Many thanks again and best wishes!

        1 Reply Last reply
        0
        • B Offline
          B Offline
          Blickwinkel74
          wrote on last edited by
          #4

          @zochovsky how did you do that with the sub categories in the menu?

          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          I also code custom websites or custom Lay features.
          💿 Email me here: 💿
          info@laytheme.com

          Before you post:
          1. When using a WordPress Cache plugin, disable it or clear your cache.
          2. Update Lay Theme and all Lay Theme Addons
          3. Disable all Plugins
          4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

          This often solves issues you might run into

          When you post:
          1. Post a link to where the problem is
          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
          Online Users
          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
          laytheme.com
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Recent
          • Tags
          • Popular
          • Users
          • Search