Responsive Sticky Navigation Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Responsive Sticky Navigation Bar using HTML CSS & JavaScript. Earlier I've shared a blog on how to create a Responsive Navigation Menu Bar but now I'm going to create a Responsive Sticky Navbar on Scroll.

What is a Sticky Menu on Scroll? Sticky, or fixed, the navbar is a  graphical UI element of the website that is locked into place (mainly on top) on scroll so that it does not disappear or scroll when the user scrolls the page up or down. 

In this program [Responsive Sticky Navigation Bar], at first, on the webpage there a transparent navbar that means it has no background color but when you scroll a little bit down then the background color appears and this navbar locked on the top of the webpage. This navigation bar is mobile-friendly which means this navbar is responsive to mobile devices also. In the PC, this navbar is shown horizontally but on mobile, this navbar is shown vertically.


Video Tutorial of Responsive Sticky Navigation Bar



In the video, you have seen the Responsive Sticky or Fixed Navbar and I hope you've understood the basic codes behind creating this navbar or navigation bar. In this video tutorial, I haven't written the codes of Clip Animation on Menu which I've shown in the demo part but I've provided codes of the menu in the source files.

If you're a beginner and you don't know JavaScript, then you can download the files of this program from the below link mentioned as "Click here to download files" and use it on your projects, websites, and HTML pages without any limitations.

You might like this:



Responsive Sticky Navigation Bar [Source Codes]

To create this program (Responsive Sticky Navbar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files through the given link. In the source files, there you also get the images of this program. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


23 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. Awesome job mate, thank you for this! I am a relative beginner, I'm trying to combine your navbar with some grid design below it. when i link both your css and bootstrap CDN it messes up the navbar significantly, thoughts on how to do this correctly? Again, thank you for the code!

    ReplyDelete
    Replies
    1. How can I tell the solutions without viewing your codes? please contact me on Instagram.

      Delete
  2. i cant save this in my blogger dashboard

    ReplyDelete
  3. hello sir, the html source code is missiong,not working, please give me correct and full code. thanks for your help

    ReplyDelete
  4. .navbar.show .menu-list{
    left:0%;

    How can I show the navbar from the right? right:0%; or 100% won't work.

    ReplyDelete
  5. Thank you. I would recomend you web designers. I subed to you and told my family about you.

    ReplyDelete
  6. Hi, excellent work, man! However, there seems to be an issue with the mobile menu version of the "Sticy Navbar - Clip Animation on Menu" code. Open the mobile bar menu, click on a link (I have added the respective hyperlinks in the text), and the mobile menu stays open covering the whole screen. On your "personal profile website" the mobile menu closes on link-click. Best.

    ReplyDelete
    Replies
    1. You may did some mistakes...Please show me your codes on my Instagram account - https://www.instagram.com/coding.np

      Delete
    2. I think I got it sorted out. One question if you do not mind - how did make the squishy effect on window maximize for the horizontal menu? Thanks.

      Delete
    3. I got the squishy effect figured out. Very nice stuff. Best.

      Delete
  7. where is the image adding code to add the image like you showed in the video

    please tell me me how to add and where to add the image

    thank you

    ReplyDelete
    Replies
    1. Download source files instead of copying codes and you'll get it

      Delete
  8. hai, i cannot download this source code

    ReplyDelete
  9. I added this navbar with bootstrap cdn. Navbar didn't work correctly. Without bootstrap cdn, it works fine. Can you help me?

    ReplyDelete
  10. This code didn't work well with bootstrap cdn. How to run correctly with bootstrap cdn? Help me

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post
CodingNepal
Subscribe our YouTube Channel