Hello! We will make a simple responsive sticky navigation bar using HTML, CSS and JQUERY.

Most of the websites have it, to easily navigate to any page of website. Reason to add navigation bar to give a quick option to user to navigate through different section of website.

We will make it sticky so that it remains on the screen always and user can easily navigate to different sections.

Let's have three steps to build this Navigation Bar.

1. HTML - to structure the Navigation bar
2. CSS - to style the Navigation bar
3. JQUERY - to add or remove some classes of CSS.

So to make it happen, we will first structure the Navigation bar using HTML.

1. Structure the Navigation Bar

Directly looking at HTML code for the Navigation Bar.

<nav class="navi sticky-nav">
            <a href="#Aboutme"><h2 id="nav-name">Your Name</h1></a>
            <ul class="main-nav js--main-nav">
                <li><a href="#Aboutme">About me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#skills">Tech Skills</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <a class="mobile-nav-icon js--mobile-nav-icon">
                <i class="ion-ios-menu"></i>
            </a>
</nav>

above html contains two screen navigation bar.

Let's consider two screens :
a. Big Screen b. Small or Medium Screen

a. In Big Screen : main-nav class will be active and mobile-nav-icon will be hidden.

b. In small or medium screen : main-nav class will be hidden and mobile-nav-icon will be activated. To display the main-nav class in this screen size, when user clicks it using jquery we can activate the main-nav class.

I hope thing's are clear till now, if not please try implementing it.

2. Styling the Navigation bar

Dividing CSS code into parts.

a. Big Screen b. Small Screen

a. Big Screen:

Let's look into Big Screen CSS code

/*-------------links-----------------*/
a{
    text-decoration: none;
    color: black;
}

/* -------------Big Screen navigation bar--------------- */

.navi{
    display: flex;
    justify-content: space-between;
    /* height: auto; */
    background-color:rgba(255, 255, 255, 0.95);
    z-index:1;
    box-shadow: 1px 2px 2px rgb(119, 109, 109);
}

.main-nav{
    display: flex;
    list-style: none;
    margin-left: auto;
    align-items: center;
}

.main-nav li{
    margin-right: 20px;
}

.main-nav li a:hover,
.main-nav li a:active{
    border-bottom: 2px solid hsla(182, 100%, 57%, 0.9);
}

#nav-name{
    margin-left: 20px;
    font-weight: 500;
}

#nav-name:hover{
    color: hsla(182, 100%, 57%);
}

Used Flex rather than using float property, as it make things easy and takes few line of code.

/* ------------Mobile Navi----------------- */

.mobile-nav-icon{
    display: none;
    cursor: pointer;
    margin-right: 20px;
    /* margin-top: -20px; */
}

.mobile-nav-icon i{
    display: block;
    font-size: 40px;
}

Small Screen mobile-nav-icon class will be hidden

/* ---------sticky navigation bar-------------------- */

.sticky-nav{
    position: fixed;
    width: 100%;
}

To make Navigation bar Sticky.

b. Small Screen :

We will use media query for small screen activation.

@media only screen and (max-width: 700px){
#nav-name{
        font-size: 20px;
        margin-top: 10px;
    }

    .main-nav{
        display: none;
        margin-top: 10px;
        width: 60%;
    }

    .main-nav li{
        padding: 5px;
        margin-left: 20px;
    }

    .main-nav li a:hover,
    .main-nav li a:active{
        border-bottom: 2px solid transparent;
    }


    .mobile-nav-icon{
        display: block;
    }

    .mobile-nav-icon i:hover{
        color: hsla(182, 100%, 57%, 0.9);
    }

    .ion-ios-close{
        font-size: 40px;
        margin-right: 5px;
    }
}

Making main-nav class hidden and mobile-nav-icon class active.

Let's jump to the Last part

3. Adding and removing some classes from CSS

$(document).ready(function(){

    //mobile nav bar

    $('.js--mobile-nav-icon').click(function(){
        var nav = $('.js--main-nav');
        var icon = $('.js--mobile-nav-icon i');

        nav.slideToggle(200);

        if(icon.hasClass('ion-ios-menu')){
            icon.addClass('ion-ios-close');
            icon.removeClass('ion-ios-menu');
        } else{
            icon.addClass('ion-ios-menu');
            icon.removeClass('ion-ios-close');
        }

    });

});

when js--mobile-nav-icon class is clicked js--main-nav class will toggle and the icon will change.

All this code is available at this link Responsive Sticky Navigation bar

I hope you will find it useful. Any mistakes, Suggestion please let me know in comment.

Thank You.