Animated navbar on affix in Bootstrap

How to animate a navbar using affix using Bootstrap?

Animating a navbar using affix

We can animate a navbar using affix by using css style in the affix

  <style>
        .affix {
            top: 0;
            width: 100%;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            border: 2px solid black;
            background-color: orange;
        }

            .affix a {
                color: black !important;
                padding: 10px;
                -webkit-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
            }

        .affix-top a {
            padding: 25px !important;
        }

        .affix + .container-fluid {
            padding-top: 200px;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="color:white;background-color:green;height:200px;">
        <h2>SN ITFunda</h2>
        <p> SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies SN ITFunda is a software company which have websites of dotnetfunda, techfunda, itfunda for making people learning .net technologies </p>
    </div>
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="200">
        <ul class="nav navbar-nav">
            <li><a href="#">DotNetFunda</a></li>
            <li><a href="#">TechFunda</a></li>
            <li><a href="#">ITFunda</a></li>
        </ul>
    </nav>
    <div class="container-fluid" style="color:black;background-color:pink; height:800px;">
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
        <h2>SN ITFunda</h2>
    </div>
</body>

In the above code snippet we have defined how to animate a navbar using affix
In the first step of the body element we have div section with class value container-fluid with given style to define the value
After creating div section we have taken nav element to define the navbar with class value as navbar navbar-inverse and data-spy as affix , data-offset-top value as 200.
In the next line we have the <ul> element with class value as nav navbar-nav to define the list value
After creating navbar we have taken another div with class value container-fluid with style
In the next line of HTML we have style sheet to define the affix when the screen is scrolled it gets minimized by appearing in given color and background-color

output

Views: 10041 | Post Order: 65

Bootstrap > Affix

Animated navbar on affix in Bootstrap

How to animate a navbar using affix using Bootstrap?

Animating a navbar using affix

Related Posts

Utility Tools