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. General Discussion
  3. Change nav and logo text to white/black when scrolling

Change nav and logo text to white/black when scrolling

Scheduled Pinned Locked Moved General Discussion
21 Posts 10 Posters 3.0k 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.
  • A Offline
    A Offline
    adam
    wrote on Jan 3, 2018, 9:20 AM last edited by
    #7

    Hey Armin thanks for the update.

    Is there anyway this is possible with direction set to horizontal and activating fade in effect rather then sliding effect?

    Many thanks

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mariusjopen
      Global Moderator
      wrote on Jan 3, 2018, 10:14 PM last edited by
      #8

      Hi @adam

      these are the only options so far:

      0_1515017609346_Bildschirmfoto 2018-01-03 um 20.12.54.png

      All the best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • A Offline
        A Offline
        adam
        wrote on Jan 3, 2018, 11:21 PM last edited by
        #9

        Hi Marius, thanks for replying

        I am aware of the options available within the fullscreen slider, I am asking if its possible to still apply the solution Armin has suggested to changing the site title and navigation color when "horizontal" direction and "fading effect" is selected.

        I got this to work when scrolling vertically however it doesn't work when scrolling horizontally or with the fade effect activated.

        Does that make sense?

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mariusjopen
          Global Moderator
          wrote on Jan 4, 2018, 2:03 PM last edited by
          #10

          Hi @adam
          ok. I get what you mean :-)

          So what needs to be done it to change this function:

           jQuery(document).on("scroll", function(){
                  $blackRows.each(function(){
                      var rect = this.getBoundingClientRect();
                      if(rect.top - offset < 0 && rect.bottom - offset > 0){
                          $nav.addClass("white");
                          return false;
                      }else{
                          $nav.removeClass("white");
                      }
                  });
          

          Right now it gets activated on scroll. You need to activate it when you click and change the slide.

          You know the basics of jQuery?

          All the best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • A Offline
            A Offline
            adam
            wrote on Jan 4, 2018, 10:09 PM last edited by
            #11

            Hi @mariusjopen

            Thanks for the tip, im not to familiar with JQuery. Is it a difficult change?

            1 Reply Last reply
            0
            • B Offline
              B Offline
              Brant
              wrote on Jan 14, 2019, 2:27 PM last edited by
              #12

              This does only seem to work in combination with the Fullscreen Slider activated. Is there a way to make it work without / or best with the cover feature activated? help is much appreciated, thanks a lot guys!

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mariusjopen
                Global Moderator
                wrote on Jan 15, 2019, 7:47 PM last edited by
                #13

                Dear @adam
                I recommend to make a simple tutorial on Codeacademy.

                You of course need to make a CSS line called

                .white {
                baclground: green;
                }
                

                Then you can see the effect.

                Dear @Brant
                no. this is always when a row which you gave a custom class hits the top of a page.

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  StudioTomas
                  wrote on Feb 15, 2019, 2:10 PM last edited by
                  #14

                  Hi there,

                  I'm not sure if this is the right forum post to comment on but hopefully you can help me!

                  My work in progress website is: studiotomas.com

                  I've used Armin's jQuery fix to turn my navigation white for certain rows in fullscreen slider using the .darkrow CSS, but I've encountered a couple of problems:

                  1. I've used an SVG for my logo in place of the site title, so I'm looking for this to link to a white version of the logo, or another fix which will turn the SVG white for a dark row.

                  2. The nav is turning white like it's supposed to on a dark row, but not matter what I try with custom css, I can't get the underline styling I have in place to change to white as well.

                  Help would be amazing, thanks!

                  Tomás

                  fabiandraxlF 1 Reply Last reply Jul 21, 2021, 9:04 AM
                  0
                  • M Offline
                    M Offline
                    mariusjopen
                    Global Moderator
                    wrote on Feb 15, 2019, 7:24 PM last edited by
                    #15

                    Dear @adam
                    put the white into the body, then you can control all elements on the page.
                    For example also a white logo which is visible or not.

                    Depending on the body class. Have a look as well into the structure of the navigation. It has a span element inside.

                    This element has the border-colour.

                    Hope that gave you a direction :-)

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mp
                      wrote on Aug 13, 2019, 8:00 AM last edited by
                      #16

                      this works nicely!

                      ... but if I use it on the first row, the site title will only change after i started scrolling a little bit. Is there a way to have it changed already on reload?

                      thanks

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        mariusjopen
                        Global Moderator
                        wrote on Aug 14, 2019, 5:20 PM last edited by
                        #17

                        Dear @mp
                        you could set the initial colour with CSS.
                        No need for jQuery in this case.

                        Best!
                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply
                        0
                        • K Offline
                          K Offline
                          koenarbouw
                          wrote on Aug 28, 2020, 1:17 PM last edited by
                          #18

                          Hey hey,

                          Just posting in here as this solved some of what I am trying to achieve. Here is a rough WIP https://mickeyross.photo/ I am working on, I would love to change the menu colour on every full screen scroll so it matches the text below. I have it working on the orange text one, what would be the best way to replicate this all the way down the page? Stuck on the purple one.

                          Appreciate the help.

                          Thanks
                          Koen

                          1 Reply Last reply
                          0
                          • RichardR Offline
                            RichardR Offline
                            Richard
                            Global Moderator
                            wrote on Sep 2, 2020, 5:13 PM last edited by
                            #19

                            Dear @koenarbouw

                            Could you please post the code you are currently using? & lets take a look :)
                            I just ask to clarify as it may differ from previously in this thread,( some posts are two years old )

                            Website looks great btw!

                            Best Wishes
                            Richard

                            1 Reply Last reply
                            0
                            • S StudioTomas
                              Feb 15, 2019, 2:10 PM

                              Hi there,

                              I'm not sure if this is the right forum post to comment on but hopefully you can help me!

                              My work in progress website is: studiotomas.com

                              I've used Armin's jQuery fix to turn my navigation white for certain rows in fullscreen slider using the .darkrow CSS, but I've encountered a couple of problems:

                              1. I've used an SVG for my logo in place of the site title, so I'm looking for this to link to a white version of the logo, or another fix which will turn the SVG white for a dark row.

                              2. The nav is turning white like it's supposed to on a dark row, but not matter what I try with custom css, I can't get the underline styling I have in place to change to white as well.

                              Help would be amazing, thanks!

                              Tomás

                              fabiandraxlF Offline
                              fabiandraxlF Offline
                              fabiandraxl
                              wrote on Jul 21, 2021, 9:04 AM last edited by fabiandraxl Jul 21, 2021, 5:18 AM
                              #20

                              @StudioTomas Hej, just visited you site and I am wondering how you achieved the changing color effect on the logo of your site? Could you please reach out to me?

                              1 Reply Last reply
                              0
                              • RichardR Offline
                                RichardR Offline
                                Richard
                                Global Moderator
                                wrote on Jul 22, 2021, 2:31 AM last edited by
                                #21

                                Dear @fabiandraxl

                                There are two different logo's. Every two 'scrolls' or 'slides' the class "white" is added to the site title changing the "background" url.

                                (standard = black logo)

                                a.sitetitle {
                                    display: block;
                                    width: 50px;
                                    height: 34px;
                                    background: url(/wp-content/uploads/2019/01/ST_Logo_test-03-03.svg) no-repeat center center / contain;
                                }
                                

                                (white 'class added' = white logo)

                                .sitetitle.white {
                                    background: url(/wp-content/uploads/2019/02/ST_Logo_test-03-03_WHITE.svg) no-repeat center center / contain;
                                }
                                

                                Also this link will help with use of the Developer tools where you can inspect a page:

                                https://laytheme.com/documentation.html#custom-css-styling


                                Hope this helps & best wishes 🌝
                                Richard
                                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