Transitioning Affixed Navigation Bar - CSS

Transitioning Affixed Navigation bar - CSS

To transition something, you move it from one state to another. So what you are trying to do is change one or more of the properties of the .navigation element.

What properties do you have available to change?

You can't change the height, width, or opacity, as those need to remain the same before and after the transition. If you want the transition to involve movement, then your best bet is to transition the position of the element. Let's do this with the "top" property.

After the transition, your navigation needs to have 0 as its top value. The height of the element is 250px, so let's make it start with top: -250. However, if we do this, the menu will initially be hidden. To fix that, we need to make it ignore the top value by removing the relative positioning.

.navigation {
    background: #fff;
    /* position: relative; */
    width: 100%;
    top: -250px;
}

Then we can transition it to 0:

#nav.affix {
    position: fixed;
    top: 0;
    z-index: 1030;
    width: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 1s ease-in;
}

RESULT:

http://jsfiddle.net/ShL4T/8/

Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Bootstrap 3 Navbar not transitioning properly

DEMO

1) Use an element below your header to apply the offset to the affix, like your container. or just hard-code the number of pixels offset: { top: 100 }.

$('#nav').affix({
    offset: { top: $('#some-lower-element').offset().top }
});

2) I think I figured this one out...

If you keep the nav visible (Remove visibility: hidden), with position: fixed and top: -50 (just above the top of the screen) the transition still works when scrolling up.

#nav{
    position: fixed;
    width: 100%;
    top:-50px;
    transition: top 1s;
    -webkit-transition: top 1s; /* Safari */
}

Switching bootstrap affix and affix-top class by scrolling make the elements below navbar move upward

And if you put the padding to the #content always? then you set absolute:position to .affix-top and relative to his parent for maintain in his place.

.nav-container-realestate {
  position: relative;
}

.affix-top {
  position: absolute;
  width: 100%;
}

.affix {
  top: 0;
  width: 100%;
}

#content {
  padding-top: 70px;
}

DEMO: https://jsfiddle.net/blonfu/9z683r2n/2/

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.

You can either change .menu a to .menu nav ul li a or redesign your classes.

For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

Add transition to centered navbar icon/logo/image on scrolldown

Hope you are looking for something like this

$(window).scroll(function() {        var scroll = $(window).scrollTop();
     //>=, not <=    if (scroll >= 300) {        //clearHeader, not clearheader - caps H        $("#nav_wrapper").addClass("scrolled");    }  else{    $("#nav_wrapper").removeClass("scrolled");  }});

html, body {    margin: 0;    padding: 0;    font-family: sans-serif;    background-color: #d7d2c4;    height: 1000px;}
nav {    background-color: #704e46;    top: 0;    position: fixed;    width: 100%;
}
#nav_wrapper {    text-align: center;}
nav ul {    margin: 0;    padding: 0;}
nav ul li {    list-style-type: none;    display: inline-block;    padding: 15px;    -webkit-transition: background-color 0.5s; /* Safari */    transition: background-color 0.5s;}
nav ul li a {    text-decoration: none;    color: white;    -webkit-transition: background-color 0.5s; /* Safari */    transition: background-color 0.5s;}
nav ul li:hover {    background-color: #5d4037;    cursor: pointer;}
nav ul li:hover a{    color: whitesmoke;   }.logo {  padding: 50px;  transition: all ease-in .25s;  margin-bottom: -30px}.logo img{  transform : scale(3);  transition: all ease-in .25s;}.scrolled .logo{  padding: 15px;}.scrolled .logo img{  transform : scale(1);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!DOCTYPE html><html><head>    <title> Camping Santa Lucia </title>    <link href="style.css" rel="stylesheet" type="text/css"/></head><body>    <nav>        <div id="nav_wrapper">            <ul>                <li><a href="#">One</a>                </li><li><a href="#">Two</a>                </li><li><a href="#">Three</a>                </li><li class="logo"><img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px">                </li><li><a href="#">Four</a>                </li><li><a href="#">Five</a>                </li><li><a href="#">Six</a></li>            </ul>        </div>    </nav>

</body></html>

How to move border bottom bar to the end of navbar while hovering

You can update your sass

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12%;
  background-color: #1c2236;
  color: white;
  position: fixed;
  left: 0;
  right: 0;
}

.nav-links {
  margin-bottom: 0;

  li {
    list-style: none;
    display: inline-block;
    border: 2.5px solid transparent;
    padding: 0.4rem 1rem;
    padding-bottom: 1.5rem;

    &:hover {
      border-bottom: 2.5px solid red;
      padding-bottom: 1.5rem;
      cursor: pointer;
      transition: 0.25s;
    }
  }
}

a {
  color: #fff;
}

---

Related Topics