transition for fixed navbar on parallax site

Question

I have a bootsrap fixed navbar which is below. I'm just trying to get a 1s transition so when I click on one of the nav buttons it slowly goes there instead of jumping there. I don't understand why its not working. Please help.

this is my html...

            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Insider<span class="green">Visit</span></a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#page1">Home</a></li>
                    <li><a href="#page2">How it Works</a></li>
                    <li><a href="#page3" class="pageTransition">About</a></li>
                </div>
              </div>
            </nav>

my css is below

nav a {
-webkit-transition-duration: 4s;
-webkit-transition-timing-function: linear;
transition-duration: 4s;
transition-timing-function: linear;

}

I am not much of a CSS guy but I can see that your
tag has not been closed, maybe closing that would fix your issue ? — Shashank Shekhar, Jul 25 '14 at 18:15

score 0 · Accepted Answer · edited May 23 '17 at 11:50

CSS transitions are outfitted to provide a transition for use with other CSS properties and the states ( :selectors ) that trigger them ( :hover, :click, animations, etc ) and won't actually provide a transition outside of that. For example, adding

nav a:hover { color: red; }

over 4 seconds, it would become red.

To achieve what you want - you'd could use a little jquery

$(".nav ul li a").click(function() { // or the a's class / id
  $('html, body').animate({
    scrollTop: $("#id-of-your-content").offset().top // or class
  }, 500);
});

( borrowed from jQuery scroll to element )

transition for fixed navbar on parallax site

1 Answers1